接上一篇文章使用 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 位
- ]
- }
- ]
- }
- }
- }
- }
- }
image.PNG
准备工作:
下载 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
结束语:
好多坑需要爬, 多看文档, 多揣摩
来源: http://www.jianshu.com/p/1dbb96bc8f37