1. 首先创建一个vue应用
image.png
2. 添加vue-cli-plugin-electron-builder插件
vue add electron-builder
image.png
3. 运行
修改了vue默认的页面。
npm run electron:serve
这时已经可以运行起来了
image.png
4. background.js
目录里比一般的vue项目多了一个background.js文件，这是electron主进程文件 ，这个文件在 src/下面。
image.png
这时我们修改代码，视图就会相应改变了。打开控制台的快捷键是ctrl+shift+i。
5. 打包
npm run electron:build
打包之后会生成一个.exe文件，这个文件在dist_electron/下面。
image.png
这时只要跟平时安装其他应用一样，在文件资源管理器里面双击该文件就可以直接安装了。安装成功之后桌面会有一个electron应用的默认图标。
6. 自定义图标
安装打包工具electron-builder和electron-icon-builder
cnpm i electron-builder --D
cnpm i electron-icon-builder
package.json中scripts添加build-icon指令
image.png
打包图片
npm run build-icon
打包之后会生成各种格式大小的图片
image.png
7. 修改vue.config.js
因为我们之前安装的插件是
vue-cli-plugin-electron-builder，而不是electron-builder。
electron-builder打包普通项目，build 配置直接在package.json 里面写。
vue-cli-plugin-electron-builder的 build 配置是需要在 项目根目录下vue.config.js里面配置。
如果没有请新建。
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
appId: "com.test.app",
productName: "Lang", //项目名，也是生成的安装文件名，即aDemo.exe
copyright: "Copyright © 2021", //版权信息
directories: {
output: "./dist" //输出文件路径
},
win: {
//win相关配置
icon: "./build/icons/icon.ico", //图标，当前图标在根目录下，注意这里有两个坑
target: [
{
target: "nsis", //利用nsis制作安装程序,打包文件的后缀为exe
arch: [
"x64", //64位
"ia32" //32位
]
}
]
},
nsis: {
oneClick: false, //一键安装
language: "2052", //安装语言
perMachine: true, //应用所有用户
allowToChangeInstallationDirectory: true //用户可以选择路径
}
}
}
}
};
8. 最后再次打包
npm run electron:build
此时生成的.exe文件就是自定义图标的应用文件了，而且根据配置用户可以自己选择安装路径。安装成功之后即可像打开其他应用一样打开了。
可能遇到的问题：
打包失败或者打包之后图标没有改变。
解决方法：
打包好的.exe文件放在我们之前配置的build output: "./dist" //输出文件路径，然后重新打包。
