將現有vue項目基於electron打包成桌面應用程序

1、前言html

  項目原本打算採用B/S架構去作的,瀏覽器網址方式打開仍是讓用戶不方便;vue

2、使用electron集成桌面應用ios

  自己項目是使用vue-cli開發的,在使用electron以前,須要將自己的項目打包好後打開index.html能顯示網頁.由於剛接觸便直接拿官方demo進行打包了.git

  1.克隆官方demo:git clone https://github.com/electron/electron-quick-startgithub

  2.cd electron-quick-start->npm install->npm start   到這就能運行demo了web

  3.將本身項目打包好的dist文件中的index.html和static文件放入electron-quick-start(跟目錄)文件中,從新start一下,運行結果如圖vue-cli

4.在package.json中增長以下代碼npm

"pack":"electron-packager . 'health-terminal' --platform=win32 --arch=x64  --out=./out --asar --app-version=0.0.1"json

安裝打包插件windows

cnpm install electron --save-dev //安裝electron 
cnpm install electron-packager --save-dev //這個是打成exe文件的插件,以後要用,提早下載好

運行npm run pack 打包成功 

npm run pack

文件結構

 

 

5.在electron中進行網絡請求時需注意,由於自己項目使用了反向代理,打包後請求路徑前面會增長本地路徑「file:e/」,解決方式:

  在config-dev.env.js(測試環境)和pro-env.js(正式環境)添加API_ROOT:'192.168.0.0:8080'(根據本身的須要修改)

新建一個js文件導出process.env.API_ROOT;

 最後在main.js中引用

請求路徑前加上this.root

 

至此一個桌面應用已經打包完成

如下是界面配置


在main.js 當中經過配置 BrowserWindow 來改變外觀

width Integer - 窗口寬度,單位像素. 默認是 800 .

height Integer - 窗口高度,單位像素. 默認是 600 .

x Integer - 窗口相對於屏幕的左偏移位置.默認居中. y Integer - 窗口相對於屏幕的頂部偏移位置.默認居中. useContentSize Boolean - width 和 height 使用web網頁size, 這意味着實際窗口的size應該包括窗口框架的 size,稍微會大一點,默認爲 false . center

Boolean - 窗口屏幕居中. minWidth Integer - 窗口最小寬度,默認爲 0 .

minHeight Integer - 窗口最小高度,默認爲 0 .

maxWidth Integer - 窗口最大寬度,默認無限制.

maxHeight Integer - 窗口最大高度,默認無限制.

resizable Boolean - 是否能夠改變窗口size,默認爲 true .

movable Boolean - 窗口是否能夠拖動. 在 Linux 上無效. 默認爲 true .

minimizable Boolean - 窗口是否能夠最小化. 在 Linux 上無效. 默認爲 true .

maximizable Boolean - 窗口是否能夠最大化. 在 Linux 上無效. 默認爲 true .

closable Boolean - 窗口是否能夠關閉. 在 Linux上無效. 默認爲 true .

alwaysOnTop Boolean - 窗口是否老是顯示在其餘窗口以前. 在 Linux上無效. 默認爲 false .

fullscreen Boolean - 窗口是否能夠全屏幕. 當明確設置值爲When false ,全屏化按鈕將會隱藏,在 macOS 將禁用. 默認 false .

fullscreenable Boolean - 在 macOS 上,全屏化按鈕是否可用,默認爲 true . skipTaskbar Boolean - 是否在任務欄中顯示窗口. 默認是 false .

kiosk Boolean - kiosk 方式. 默認爲 false . title String - 窗口默認title. 默認 "Electron" .

icon NativeImage - 窗口圖標, 若是不設置,窗口將使用可用的默認圖標.

show Boolean - 窗口建立的時候是否顯示. 默認爲 true .

frame Boolean - 指定 false 來建立一個 Frameless Window. 默認爲 true .

acceptFirstMouse Boolean - 是否容許單擊web view來激活窗口 . 默認爲 false .

disableAutoHideCursor Boolean - 當 typing 時是否隱藏鼠標.默認 false .

autoHideMenuBar Boolean - 除非點擊 Alt ,不然隱藏菜單欄.默認爲 false .

enableLargerThanScreen Boolean - 是否容許容許改變窗口大小大於屏幕. 默認是 false .

backgroundColor String -窗口的 background color 值爲十六進制,如 #66CD00 或 #FFF 或 #80FFFFFF (支持透明 度). 默認爲在 Linux和 Windows 上爲 #000 (黑色) , Mac上爲 #FFF (或透明).

hasShadow Boolean - 窗口是否有陰影. 只在 macOS 上有效. 默認爲 true .

darkTheme Boolean - 爲窗口使用 dark 主題, 只在一些擁有 GTK+3 桌面環境上有效. 默認爲 false .

transparent Boolean - 窗口 透明. 默認爲 false .

type String - 窗口type, 默認普通窗口. 下面查看更多. titleBarStyle String - 窗口標題欄樣式. 下面查看更多.

webPreferences Object - 設置界面特性. 下面查看更多.

 

如何隱藏electron窗體的菜單欄

 

electron中默認帶有頂部菜單欄,有時候咱們的應用不須要。

再main.js文件中設置

複製代碼
const electron = require('electron')

const path = require('path')
const url = require('url')

let mainWindow
const Menu = electron.Menu
function createWindow () {
 // 隱藏菜單欄
  Menu.setApplicationMenu(null)
  // Create the browser window.設置窗口寬高,最小寬高,圖標等
  mainWindow = new BrowserWindow({ width: 800, height: 600, minWidth: 1280, minHeight: 800, resizable: false, allowRunningInsecureContent: true, experimentalCanvasFeatures: true, icon: './favicon.ico'})
  mainWindow.loadURL("http://www.nlfit.cn/saas/index.html#/login")
 
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}
複製代碼

 

const electron = require('electron')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.

// const app = electron.app
// const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')

let mainWindow
const Menu = electron.Menu
function createWindow () {
Menu.setApplicationMenu(null)
// Create the browser window.
mainWindow = new BrowserWindow({ width: 800, height: 600, minWidth: 1280, minHeight: 800, resizable: false, allowRunningInsecureContent: true, experimentalCanvasFeatures: true, icon: './favicon.ico'})
// and load the index.html of the app.
mainWindow.loadURL("http://www.nlfit.cn/saas/index.html#/login")
// Open the DevTools.
// mainWindow.webContents.openDevTools()

// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}
相關文章
相關標籤/搜索