1.安装/升级vue-cli
首先确认vue-cli版本：vue –V
如果本地使用的是vue-cli2.x或者更早版本，可先卸载：
cnpm uninstall vue-cli –g
之后执行cnpm install @vue/cli –g
2. 创建vue项目
vue create electron-vue-demo按照步骤一步一步确认安装
3. 自动安装electron
vue add electron-builder
a.在安装过程中可能会卡掉，掐掉继续安装
b.先安装cnpm install --save-dev electron-chromedriver
再执行vue add electron-builder
4.手动安装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复制以下代码
'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.安装依赖包cnpm install
6.]编译启动APP
npm run electron:serve
首次可能出现Failed to fetch extension的报错信息可忽略或者注销background.js以下代码
7.设置APP窗口图标等操作
a.APP窗口应用图标以及窗口大小，在background.js中修改
b.安装包图标在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.页面报require is not defined 错误：
在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会出现错误可不管，因为里面有个download zip文件需要翻墙下载，不影响使用
d.通过快捷键打开控制台调试，即devTools,修改background.js:
globalShortcut.register('CommandOrControl+Shift+i',function(){
win.webContents.openDevTools()
})