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

语言: CN / TW / HK

时间 2022-09-25 20:26:00 博客园-原创精华区

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 架构，无论如何您都会得到一个安装程序，然后将自动安装适当的架构。

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

"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、构建配置设置

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

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

//查看更多 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，可以尝试比它小的分辨率看编译的时候会出现神马呢？
win.artifactName：打包出来的应用程序文件名称
nsis.installerIcon：安装程序图标的路径，相对于构建资源或项目目录。默认为build/installerIcon.ico或应用程序图标
nsis.uninstallerIcon：卸载程序图标的路径，相对于构建资源或项目目录。默认为build/uninstallerIcon.ico或应用程序图标。 老铁们知道在控制面版中怎么设置图标为应用程序图标？
nsis.runAfterFinish：完成后是否运行已安装的应用程序。
nsis.script：
用于自定义安装程序的 NSIS 脚本的路径。默认为build/installer.nsi

如果NSIS的语法不了解的话，可以下载NSIS安装包，其内置了脚本向导-可视化的生成NSIS脚本文件，使用后会发现自定义安装程序能如此丝滑。

对于linux、macOS目标平台的构建，由于手头没有对应的环境机器，本着务实求是的原则，先暂且不更新，等有资源了再一一补上~

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

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

「其他文章」