接上一篇文章，
现在我们要做的是：
在安装本款软件的时候，要有64位、32位的选择，会有问询安装路径。
问询是否需要生成快捷方式，问询安装完成立即打开。
并且我们想修改一下快捷方式的图标，应用程序的名称。
还是相同的博主，这是他的原文
https://www.jianshu.com/p/1dbb96bc8f37
vue-cli-plugin-electron-builder打包构建用的是electron-builder
https://www.electron.build(官网)
第一步，到官网看文档
1635149640.png
好巧，我们用的就是vue CLI3，点进去看看，然后get Start，点击左侧菜单Configuration
https://nklayman.github.io/vue-cli-plugin-electron-builder（官网）
1635150486.png
All CLI arguments passed to electron:build will be forwarded to electron-builder.
这句话的意思就是：这些参数都是通过electron:build命令来提交给electron-builder的。
再通俗的讲：我们用electron:build来打包的参数配置格式如图所示。即：
// vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
// options placed here will be merged with default configuration and passed to electron-builder
}
}
}
}
但是，我们在我们的项目中没有发现vue.config.js这个文件，这是由于vue-cli3.0是号称0配置的，所以我们自己在根目录下创建一个vue.config.js文件即可。注意！根目录！！！！
第二步，写配置参数
我们本质上用的还是electron-builder来进行打包的，所以参数肯定是在electron-builder的官网上
回到electron-builder官网，并点击菜单 Configuration
1635150763.png
根据官网的文档，我们可以写出配置如下：
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
"appId": "com.example.app",
"productName":"aDemo",//项目名，也是生成的安装文件名，即aDemo.exe
"copyright":"Copyright © 2019",//版权信息
"directories":{
"output":"./dist"//输出文件路径
},
"win":{//win相关配置
"icon":"./shanqis.ico",//图标，当前图标在根目录下，注意这里有两个坑
"target": [
{
"target": "nsis",//利用nsis制作安装程序
"arch": [
"x64",//64位
"ia32"//32位
]
}
]
}
}
}
}
}
构建一下试试：
npm run electron:build
D:\Electron\demo>npm run electron:build
> demo@0.1.0 electron:build D:\Electron\demo
> vue-cli-service electron:build
INFO Bundling render process:
\ Building modern bundle for production...
DONE Compiled successfully in 5022ms 4:45:31 PM
File Size Gzipped
dist_electron\bundled\js\chunk-vendors 65.14 KiB 23.43 KiB
.2026470a.js
dist_electron\bundled\js\app.4aea6141. 4.53 KiB 1.61 KiB
js
dist_electron\bundled\css\app.e2713bb0 0.33 KiB 0.23 KiB
.css
Images and other types of assets omitted.
DONE Build complete. The dist_electron\bundled directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
| Bundling main process...
DONE Compiled successfully in 5152ms 4:45:36 PM
File Size Gzipped
dist_electron\bundled\background.js 160.44 KiB 49.67 KiB
Images and other types of assets omitted.
INFO Building app with electron-builder:
• electron-builder version=20.44.4
• description is missed in the package.json appPackageFile=D:\Electron\demo\dist_electron\bundled\package.json
• author is missed in the package.json appPackageFile=D:\Electron\demo\dist_electron\bundled\package.json
• writing effective config file=dist\builder-effective-config.yaml
• no native production dependencies
• packaging platform=win32 arch=x64 electron=5.0.0 appOutDir=dist\win-unpacked
• no native production dependencies
• packaging platform=win32 arch=ia32 electron=5.0.0 appOutDir=dist\win-ia32-unpacked
• building target=nsis file=dist\aDemo Setup 0.1.0.exe archs=x64, ia32 oneClick=true perMachine=false
• building block map blockMapFile=dist\aDemo Setup 0.1.0.exe.blockmap
DONE Build complete!
成功~
1635150991.png
第三步：制作成安装程序
vue.config.js(根目录新建,注掉的部分是因为用vue自带的icon图标不合格会报错)
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
"appId": "com.example.app",
"productName": "nihao", //项目名，也是生成的安装文件名，即aDemo.exe
"copyright": "Copyright © 2021", //版权信息
"directories": {
"output": "./dist_electron" //输出文件路径
},
"win": { //win相关配置
// "icon":"./public/favicon.ico",//图标，当前图标在根目录下，注意这里有两个坑
"target": [{
"target": "nsis", //利用nsis制作安装程序
"arch": [
"x64" //64位
]
}]
},
"nsis": {
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
// "installerIcon": "./public/favicon.ico",// 安装图标
// "uninstallerIcon": "./public/favicon.ico",//卸载图标
// "installerHeaderIcon": "./public/favicon.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true, // 创建开始菜单图标
"shortcutName": "nihao", // 图标名称
},
}
}
}
}
注意我只生成了64位，安装试一试：
1635151287.png
1635151346.png
1635151374.png
1635151436.png
正常！
如果要求更高的话，还可以自定义很多东西。还是看文档！
这篇文章写得挺详细，可以参考，网址
注意一点，他的配置文件和我们的不一样，我们是在vue.config.js中，并且没有build！
以上就是在vue-cli-plugin-electron-builder下用electron:build打包或生成应用程序的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~
