之前要制作桌面应用程序，一般使用vb，vc， Delphi等，不过使用web页面也可以制作桌面应用，就是使用一个桌面容器。
用vuecli创建一个vue工程
vue create electron-vue-my
安装electron-builder
vue add electron-builder
// 安装的东西很多，注意网络
// 可以先安装cnpm install --save-dev electron-chromedriver
// 本人安装时，报了很多错，后来隔天新建了个工程，一下子就安装成功了
安装成功后，运行npm run electron:serve，如果出现以下页面，说明成功了
打包桌面应用
// 执行下面的命令即可
npm run electron:build
//在dist_electron目录下会发现一个exe，双击这个exe会执行安装程序。
//还有一个win-unpacked文件夹，里面是我们之前打包的模式，点击里面的electron-vue-my.exe，即可运行
Electron 配置
常规的配置基本上都在background.js中
取消跨域限制
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
webSecurity: false
}
})
设置窗口图标
准备windows和macOS两版图标。
- windows: app.ico 最小尺寸：256x256
- macOS: app.png或app.icns 最小尺寸：512x512
把图标文件放到public目录下：
|- /dist_electron
（略）
|- /public
|- app.icns
|- app.ico
|- app.png
|- favicon.ico
|- index.html
|- /src
（略）
|- .editorconfig
|- .eslintrc.js
|- .gitignore
|- babel.config.js
|- package.json
|- package-lock.json
|- README.md
图标生成
- 安装组件，cnpm install --save-dev electron-icon-builder
- 准备好你的图标，放到/public/icon.png
- 在package.json的scripts下新增一条命令
"electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten" - 执行，npm run electron:generate-icons，生成一系列图标，把图标复制到public目录。
打包配置
修改vue.config.js，这里我就把修改的部分放出来：
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
"appId": "com.wangdaodao.app",
"productName": "AppDemo ", //项目名，也是生成的安装文件名
"copyright": "Copyright © 2020", //版权信息
"directories": {
"output": "./dist_electron" //输出文件路径
},
"win": { //win相关配置
"icon": "./public/icons/icon.ico", //图标，当前图标在根目录下，注意这里有两个坑
"target": [
{
"target": "nsis", //利用nsis制作安装程序
"arch": [
"x64", //64位
"ia32" //32位
]
}
]
},
"mac": {
"icon": "./public/icons/icon.icns"
},
"nsis": {
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"installerIcon": "./public/icons/icon.ico", // 安装图标
"uninstallerIcon": "./public/icons/icon.ico", //卸载图标
"installerHeaderIcon": "./public/icons/icon.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true, // 创建开始菜单图标
"shortcutName": "AppDemo", // 图标名称
},
}
}
}
}
打包APP
npm run electron:build
删除dist_electron文件夹，重新执行打包命令，npm run electron:build，会发现应用的图标变了
最终在dist_electron目录下生成build后的产品。
/dist_electron
|- /bundled
（略）
|- /win-unpacked <-- 绿色版
（略）
|- AppDemo Setup 0.1.0.exe <-- 安装文件
|- AppDemo Setup 0.1.0.exe.blockmap
|- builder-effective-config.yaml
|- index.js
参考：
https://wangdaodao.com/20200707/vue-cli3-electron.html
https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/
https://segmentfault.com/a/1190000021376934
