基於electron+vue+element構建項目模板之【打包篇】

2022 年 9 月 25 日
筆記
Electron, electron-builder

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節點，節點內容如下所示：

//查看更多 //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腳本文件，使用後會發現自定義安裝程序能如此絲滑。