一、安装Node.js、Vue CLI
// vue -V
@vue/cli 4.5.11
// node -v
v14.3.0
二、创建Vue3.0项目
vue create my-electron-app
三、添加vue-cli-plugin-electron-builder依赖
vue add electron-builder
由于网络问题，最好使用淘宝镜像
npm config set registry https://registry.npm.taobao.org
四、运行
npm run electron:serve
image.png
五、调用Electron API和Node.js API
background.js中配置：
webPreferences: {
// webSecurity: false,// 取消跨域限制
enableRemoteModule: true, // Electron10以后的版本，取消 Remote 模块警告
nodeIntegration: true // 是否集成 Nodejs
}
Vue组件中引入：
const { ipcRenderer, remote } = window.require('electron')
const fse = window.require('fs-extra')
const fs = window.require('fs')
六、electron_builder打包
由于打包时需要下载依赖，我们可配置淘宝镜像，这样下载更快。在工程目录下新建“.npmrc”，并配置如下：
electron_mirror="https://npm.taobao.org/mirrors/electron/"
electron_builder_binaries_mirror="http://npm.taobao.org/mirrors/electron-builder-binaries/"
在工程路目录下，新建“vue.config.js”，配置如下：
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
"appId": "com.example.app",
"productName": "demo", //项目名，也是生成的安装文件名，即demo.exe
"copyright": "Copyright © 2020", //版权信息
"directories": {
"output": "./dist_electron" //输出文件路径
},
"asar": true,
"dmg": {
"contents": [{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"nsis": {
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"installerIcon": "./public/icon.ico", // 安装图标
"uninstallerIcon": "./public/icon.ico", //卸载图标
"installerHeaderIcon": "./public/icon.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true, // 创建开始菜单图标
"shortcutName": "demo", // 图标名称
},
"win": { //win相关配置
"icon": "./public/icon.ico", //图标，当前图标在根目录下，注意这里有两个坑
"target": [{
"target": "nsis", //利用nsis制作安装程序
"arch": [
"x64", //64位
"ia32" //32位
]
}]
},
"mac": {
"icon": './public/icon.icns'
}
}
}
}
}
最后，执行打包命令：
npm run electron:build
在配置的输出目录下，可以找到打包的安装文件：
image.png
双击安装文件，可进行安装。
image.png
参考文章：
https://www.jianshu.com/p/f691abc84fa4
Vue CLI Plugin Electron Builder
