在vue-cli-plugin-electron-builder
2019-07-03 本文已影响6人
相听不厌
接上一篇文章使用vue-cli-plugin-electron-builder开发vue-cli3.0+Electron桌面开发应用
建议先看文章最后的几个坑，以免入坑不能爬坑
vue-cli-plugin-electron-builder打包构建用的是electron-builder,electron-builder的官网
我们已经安装过vue-cli-plugin-electron-builder就不用再去安装一遍electron-builder了，我也没有试过重新安装一遍好不好用，感兴趣的自行测试
第一步，到官网看文档
image.png
好巧，我们用的就是vue CLI3，点进去看看，然后get Start，点击左侧菜单Configuring
image.png
TIP
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
image.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!
成功！
image.png
LINUX、MAC的道理一样，我基本用不到这两个系统，所以不做研究，感兴趣的可以自己看文档。
现在我们win系统32位和64位的生成出来了，那么如果将其制作成对应的安装程序呢？
有两种方法，第一种就是跟上面一样，写配置。第二种，就是运用NSIS工具。
第三步：制作成安装程序
第一种方法：配置参数的方法
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位
]
}
]
},
"nsis": {
"oneClick": false, // 是否一键安装
"allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
"allowToChangeInstallationDirectory": true, // 允许修改安装目录
"installerIcon": "./shanqis.ico",// 安装图标
"uninstallerIcon": "./shanqis.ico",//卸载图标
"installerHeaderIcon": "./shanqis.ico", // 安装时头部图标
"createDesktopShortcut": true, // 创建桌面图标
"createStartMenuShortcut": true,// 创建开始菜单图标
"shortcutName": "demo", // 图标名称
},
}
}
}
}
注意我只生成了64位，安装试一试：
image.png
image.png
image.png
image.png
正常！
如果要求更高的话，还可以自定义很多东西。还是看文档！
这篇文章写得挺详细，可以参考，网址
注意一点，他的配置文件和我们的不一样，我们是在vue.config.js中，并且没有build！
第二种方法：利用nsis软件
我们没有配置nsis时，同时构建了32位和64位
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位
]
}
]
}
}
}
}
}
准备工作：
下载nsis软件：Nullsoft Install System
链接：https://pan.baidu.com/s/1oLRrnclChU09xcosUa_hTw
提取码：o6iu
解压，安装
安装后，会有两个快捷方式
image.png
1、打开上面一个
image.png
2、点击HW VNISEdit
image.png
3、选择文件》新建脚本：向导
image.png
4、点击下一步，进入应用程序信息，填写对应的信息，下一步
image.png
5、图标需是icon,语言中文，安装程序文件根据实际情况设置，别改后缀
image.png
6、闪屏和背景设置，没必要修改，下一步
image.png
7、默认允许用户更改安装目录；授权文件若有就写，如果没有就清空！清空！清空！否则后面编译会出问题
image.png
8、把默认的两个文件删除掉，然后点击添加
image.png
image.png
9、添加源文件（注意我选择的是64位的，如果是32位的到win-ia32-unpacked文件中找），选好后点击确定，先不要下一步
image.png
10、添加文件树
image.png
11、选择源文件对应的文件夹
image.png
12、勾选包含子目录，确定，下一步
image.png
13、修改开始菜单
image.png
14、设置安装成功后启动的程序，默认就是我们打包后的启动程序，不用改，下一步
image.png
15、设置卸载程序，下一步
image.png
16、勾选保存脚本和转换文件路径到相对路径，点击完成
image.png
17、保存一个位置
image.png
18、保存后通常会自行打开脚本，如果没有打开，请自行到刚才保存的位置打开，打开后界面如下
image.png
19、编译并运行
image.png
20、如果刚才没有清空许可协议，会报错。解决：删除报错的这一行，重新编译并运行
image.png
21、正在编译，需要一段时间
image.png
22、编译成功会自动弹出安装页面
image.png
23、安装后并运行，发现正常
image.png
24、安装程序应该跟保存的编译文件同一个目录
image.png
25、开始菜单
image.png
26、第三方管理软件可以查看，出品公司
image.png
附上碰到的坑：
坑1：vue.config.js中配置参数不能有空格
"appId ": "com.example.app",有空格会报错，不能识别的参数
"appId": "com.example.app",正确无空格的
报错部分样式,如下：
Error: Configuration is invalid.
- configuration has an unknown property 'appId '. These properties are valid:
object { $schema?, afterAllArtifactBuild?, afterPack?, afterSign?, apk?, appId?, appImage?, appx?, artifactBuildCompleted?, artifactBuildStarted?, artifactName?, asar?, asarUnpack?, beforeBuild?, buildDependenciesFromSource?, buildV
ersion?, compression?, copyright?, cscKeyPassword?, cscLink?, deb?, detectUpdateChannel?, directories?, dmg?, electronCompile?, electronDist?, electronDownload?, electronUpdaterCompatibility?, electronVersion?, extends?, extraFiles?, e
xtraMetadata?, extraResources?, fileAssociations?, files?, forceCodeSigning?, framework?, freebsd?, generateUpdatesFilesForAllChannels?, icon?, includePdb?, launchUiVersion?, linux?, mac?, mas?, msi?, muonVersion?, nodeGypRebuild?, nod
eVersion?, npmArgs?, npmRebuild?, npmSkipBuildFromSource?, nsis?, nsisWeb?, onNodeModuleFile?, p5p?, pacman?, pkg?, portable?, productName?, protocols?, protonNodeVersion?, publish?, readonly?, releaseInfo?, remoteBuild?, removePackage
Scripts?, rpm?, snap?, squirrelWindows?, target?, win? }
坑2：配置图标时，图标的大小最小为256*256
"icon":"./shanqis.ico"就是这个图标
报错是XXX at least 256*256
坑3：不要直接把.jpg或其他格式改后缀为.ico？解决：http://ico.duduxuexi.com/到这个网址或其他方式自己转换，记住是256*256的
ERROR Error: Exit code: 1. Command failed: C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.4.0\rcedit-ia32.exe D:\dist\win-unpacked\aDemo.exe --set-version-string FileDescription aDemo --set-vers
ion-string ProductName aDemo --set-version-string LegalCopyright Copyright © 2019 --set-file-version 0.1.0 --set-product-version 0.1.0.0 --set-version-string InternalName aDemo --set-version-string OriginalFilename --set-icon D:\Elect
ron\demo\shanqis.ico
Reserved header is not 0 or image type is not icon for 'D'
Fatal error: Unable to set icon
坑4：连接超时403错误,由于我们要安装ia32，所以就要下载对应的electron，解决办法看我之前的一篇文章https://www.jianshu.com/p/ced7f0c2bd40（注意，下载下来后直接放到对应的文件夹下就可以了，不用npm安装了）
报错样式：
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 5375ms 3:32:53 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 5578ms 3:32:59 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=D:\dist\builder-effective-config.yaml
• no native production dependencies
• packaging platform=win32 arch=x64 electron=5.0.0 appOutDir=D:\dist\win-unpacked
• no native production dependencies
• packaging platform=win32 arch=ia32 electron=5.0.0 appOutDir=D:\dist\win-ia32-unpacked
?[34m • ?[0mdownloading ?[34mparts?[0m=8 ?[34msize?[0m=61 MB ?[34murl?[0m=https://github.com/electron/electron/releases/download/v5.0.0/electron-v5.0.0-win32-ia32.zip
?[34m • ?[0mretrying (1)
?[34m • ?[0mretrying (2)
?[34m • ?[0mretrying (3)
?[31m ⨯ ?[0mpart download request failed with status code 403
