1.安裝/升級(jí)vue-cli
首先確認(rèn)vue-cli版本：vue –V
如果本地使用的是vue-cli2.x或者更早版本，可先卸載：
cnpm uninstall vue-cli –g
之后執(zhí)行cnpm install @vue/cli –g
2. 創(chuàng)建vue項(xiàng)目
vue create electron-vue-demo按照步驟一步一步確認(rèn)安裝
3. 自動(dòng)安裝electron
vue add electron-builder
a.在安裝過程中可能會(huì)卡掉欺劳，掐掉繼續(xù)安裝
b.先安裝cnpm install --save-dev electron-chromedriver
再執(zhí)行vue add electron-builder
4.手動(dòng)安裝electron
a.在package.json添加：
"electron:build":"vue-cli-service electron:build",
"electron:serve":"vue-cli-service electron:serve",
"postinstall":"electron-builder install-app-deps",
"postuninstall":"electron-builder install-app-deps"
"main":"background.js",
"electron":"^5.0.6",
"vue-cli-plugin-electron-builder":"^1.3.5",
b.新建src/background.js復(fù)制以下代碼
'use strict'
import { app, protocol, BrowserWindow }from 'electron'
import {
?createProtocol,
? installVueDevtools
} from'vue-cli-plugin-electron-builder/lib'
const isDevelopment = process.env.NODE_ENV!== 'production'
// Keep a global reference of the windowobject, if you don't, the window will
// be closed automatically when theJavaScript object is garbage collected.
let win
// Scheme must be registered before the appis ready
protocol.registerSchemesAsPrivileged([{
?scheme: 'app',
?privileges: {
???secure: true,
???standard: true
? }
}])
function createWindow () {
? //Create the browser window.
? win= new BrowserWindow({
???width: 800,
???height: 600,
???webPreferences: {
?????nodeIntegration: true
??? }
? })
? if(process.env.WEBPACK_DEV_SERVER_URL) {
???// Load the url of the dev server if in development mode
???win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
???if (!process.env.IS_TEST) win.webContents.openDevTools()
? }else {
???createProtocol('app')
???// Load the index.html when not in development
???win.loadURL('app://./index.html')
? }
?win.on('closed', () => {
???win = null
? })
}
// Quit when all windows are closed.
app.on('window-all-closed', () => {
? //On macOS it is common for applications and their menu bar
? //to stay active until the user quits explicitly with Cmd + Q
? if(process.platform !== 'darwin') {
???app.quit()
? }
})
app.on('activate', () => {
? //On macOS it's common to re-create a window in the app when the
? //dock icon is clicked and there are no other windows open.
? if(win === null) {
???createWindow()
? }
})
// This method will be called when Electronhas finished
// initialization and is ready to createbrowser windows.
// Some APIs can only be used after thisevent occurs.
app.on('ready', async () => {
? if(isDevelopment && !process.env.IS_TEST) {
???// Install Vue Devtools
???try {
?????await installVueDevtools()
??? }catch (e) {
?????console.error('Vue Devtools failed to install:', e.toString())
??? }
? }
?createWindow()
})
// Exit cleanly on request from parentprocess in development mode.
if (isDevelopment) {
? if(process.platform === 'win32') {
???process.on('message', data => {
?????if (data === 'graceful-exit') {
???????app.quit()
?????}
???})
? }else {
???process.on('SIGTERM', () => {
?????app.quit()
???})
? }
}
5.安裝依賴包c(diǎn)npm install
6.]編譯啟動(dòng)APP
npm run electron:serve
首次可能出現(xiàn)Failed to fetch extension的報(bào)錯(cuò)信息可忽略或者注銷background.js以下代碼
7.設(shè)置APP窗口圖標(biāo)等操作
a.APP窗口應(yīng)用圖標(biāo)以及窗口大小唧取，在background.js中修改
b.安裝包圖標(biāo)在vue.config.js中修改
chainWebpack: config => {...},
+??pluginOptions: {
+??????electronBuilder: {
+??????????builderOptions: {
+?????????????? win: {
+?????????????????? icon: './public/app.ico'
+?????????????? },
+?????????????? mac: {
+?????????????????? icon: './public/app.png'
+?????????????? }
+??????????}
+??????}
+?? }
8.打包APP：npm run electron:build
9.可能遇到的一些問題：
a.頁面報(bào)require is not defined 錯(cuò)誤：
在background.js中添加如圖false改為true:
b.注意：
1.node.js版本需要在6，7划提，8枫弟，9，10
2.npm版本要高于2
3.vue-cli版本需要高于3.X版本
4.盡量用cnpm ( cnpm下載：npm install -g cnpm--registry=https://registry.npm.taobao.org )
c.npm
run electron:build會(huì)出現(xiàn)錯(cuò)誤可不管鹏往，因?yàn)槔锩嬗袀€(gè)download zip文件需要翻墻下載淡诗，不影響使用
d.通過快捷鍵打開控制臺(tái)調(diào)試，即devTools,修改background.js:
? globalShortcut.register('CommandOrControl+Shift+i',function(){
win.webContents.openDevTools()
?})
