基于electron+vue+element构建项目模板之【打包篇】

1、概述

开发平台OS:windows

开发平台IDE:vs code

本项目使用了一款Vue-CLI插件(vue-cli-plugin-electron-builder) 来构建 electron 桌面应用程序,其是对 electron-builder 进行了封装。

electron-builder:用来打包构建windows、macOS、linux平台的electron桌面应用程序,提供了开箱即用的 自动更新 支持;两种打包方式:命令行界面(CLI)和程序化API;支持多平台的构建,但也不要期望在一个平台上为所有平台构建应用程序(应用程序有本机依赖项只能在目标平台上编译)。

用于构建目标平台和架构的命令如下:

  • windows 平台命令:--win, -w, --windows
  • linux 平台命令:--linux, -l
  • macOS 平台命令:--mac, -m, -o, --macos
  • 64位架构命令:--x64
  • 32位架构命令:--ia32
  • ARM32位架构命令:--armv7l
  • ARM64位架构命令:--arm64

2、构建 windows 目标平台应用程序

2.1、添加命令脚本

package.json文件 scripts 节点下添加命令脚本:"build:dev:win32": "vue-cli-service electron:build --mode dev --win --ia32"

此脚本是构建windows为目标平台x86架构的应用程序,当没传目标平台和架构且没在配置项中设置时,则默认会按当前平台当前架构使用来构建应用程序。

如果同时构建 ia32 和 x64 架构,无论如何您都会得到一个安装程序,然后将自动安装适当的架构。

建议是在命令脚本中指定目标平台和架构,这样能非常直观的了解要构建哪类的应用程序,具体命令脚本如下所示:

基于electron+vue+element构建项目模板之【打包篇】

"scripts": {     "serve": "vue-cli-service serve",     "build": "vue-cli-service build",     "lint": "vue-cli-service lint",     "electron:serve": "vue-cli-service electron:serve",     "build:dev:win32": "vue-cli-service electron:build --mode dev --win --ia32",     "build:test:win32": "vue-cli-service electron:build --mode test --win --ia32",     "build:prod:win32": "vue-cli-service electron:build --mode prod --win --ia32",     "postinstall": "electron-builder install-app-deps",     "postuninstall": "electron-builder install-app-deps"   }

点击查看代码

2.2、构建配置设置

添加命令脚本后就可以执行以构建应用程序了,但此时构建出来的应用程序在安装的时候安装界面太过于简陋,应用图标以及可执行应用程序名称等等,这些都不满足最终交付的要求,此时需要定制化。

基于electron+vue+element构建项目模板之【打包篇】

 

vue.config.js文件pluginOptions->electronBuilder节点下新增builderOptions节点,节点内容如下所示:

基于electron+vue+element构建项目模板之【打包篇】

//查看更多 https://www.electron.build/       builderOptions: {         //应用程序 ID,虽不是必填但是强烈建议设置显示ID         appId: "com.electron.evet",         //产品名称:可执行文件名称         //productName: process.env.VUE_APP_NAME,         //应用程序版权         copyright: process.env.VUE_APP_COPYRIGHT,         // 注入属性到 package.json         extraMetadata: {           //当没有设置productName时,用name当产品名称;反之则是productName           name: process.env.VUE_APP_NAME,           version: process.env.VUE_APP_VERSION,           //   作者注入不进去,这是为什么?           //   author: "注入不进",         },         //目标平台:windows         win: {           //应用程序图标的路径。默认为build/icon.ico,最小为256pxx256px           icon: undefined,           //目标包类型           target: "nsis",           //打包出来的应用程序文件名称           artifactName:             `${process.env.VUE_APP_NAME}(v${process.env.VUE_APP_VERSION})-${process.env.VUE_APP_ENV}` +             ".${ext}",         },         nsis: {           //不必明确指定它——基于名称的应用程序图标的路径。UUID v5将从您的appId或name生成。这意味着一旦您的应用程序在使用中(或名称,如果未设置) ,您不应更改 appId 。appId可以安全地更改应用程序产品名称(标题)或描述           //guid: "F3F1A6E7-ED00-CC77-9CE5-B93ACDCD181E",           //是否创建一键安装程序           oneClick: false,           // 允许请求提升。若为false,则用户必须使用提升的权限重新启动安装程序           allowElevation: true,           //是否允许修改安装目录           allowToChangeInstallationDirectory: true,           //安装程序图标的路径,相对于构建资源或项目目录。默认为build/installerIcon.ico或应用程序图标           installerIcon: undefined,           //卸载程序图标的路径,相对于构建资源或项目目录。默认为build/uninstallerIcon.ico或应用程序图标           uninstallerIcon: undefined,           //控制面板中的卸载程序显示名称。           uninstallDisplayName: `${process.env.VUE_APP_NAME} ${process.env.VUE_APP_VERSION}`,           //仅限一键式安装程序。标题图标的路径(进度条上方),相对于构建资源或项目目录。默认为build/installerHeaderIcon.ico或应用程序图标           installerHeaderIcon: undefined,           //是否创建桌面快捷方式设置为always是否在重新安装时也重新创建(即使被用户删除)           createDesktopShortcut: true,           //是否创建开始菜单快捷方式           createStartMenuShortcut: true,           //将用于所有快捷方式的名称。默认为应用程序名称           shortcutName: process.env.VUE_APP_NAME,           //完成后是否运行已安装的应用程序。           runAfterFinish: false,           //仅限一键式安装程序。卸载时是否删除应用数据。           deleteAppDataOnUninstall: true,           //用于自定义安装程序的 NSIS 脚本的路径。默认为build/installer.nsi           script: undefined,         },       }

点击查看代码

配置项说明及效果如下所示:

  • appId:应用程序ID,强烈建议设置,设置后可以不用设置 guid
  • extraMetadata:注入属性到 package.json。为什么不能注入 author 属性???有知道的老铁烦请告知下!
  • win.icon:应用程序图标的路径。默认为build/icon.ico,最小分辨率为256 x 256,可以尝试比它小的分辨率看编译的时候会出现神马呢?
    基于electron+vue+element构建项目模板之【打包篇】

     

     

  • win.artifactName:打包出来的应用程序文件名称
    基于electron+vue+element构建项目模板之【打包篇】
  • nsis.installerIcon:安装程序图标的路径,相对于构建资源或项目目录。默认为build/installerIcon.ico或应用程序图标
    基于electron+vue+element构建项目模板之【打包篇】
  • nsis.uninstallerIcon:卸载程序图标的路径,相对于构建资源或项目目录。默认为build/uninstallerIcon.ico或应用程序图标。老铁们知道在控制面版中怎么设置图标为应用程序图标?
    基于electron+vue+element构建项目模板之【打包篇】
  • nsis.runAfterFinish:完成后是否运行已安装的应用程序。
  • nsis.script:用于自定义安装程序的 NSIS 脚本的路径。默认为build/installer.nsi
    如果NSIS的语法不了解的话,可以下载NSIS安装包,其内置了脚本向导-可视化的生成NSIS脚本文件,使用后会发现自定义安装程序能如此丝滑。
  • 对于linux、macOS目标平台的构建,由于手头没有对应的环境机器,本着务实求是的原则,先暂且不更新,等有资源了再一一补上~

    感谢您阅读本文,如果本文给了您帮助或者启发,还请三连支持一下,点赞、关注、收藏,作者会持续与大家分享更多干货~

    源码地址:https://gitee.com/libaitianya/electron-vue-element-template

     

    发表评论

    相关文章

    当前内容话题
  • 0