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

//檢視更多 http://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目標平臺的構建，由於手頭沒有對應的環境機器，本著務實求是的原則，先暫且不更新，等有資源了再一一補上~

感謝您閱讀本文，如果本文給了您幫助或者啟發，還請三連支援一下，點贊、關注、收藏，作者會持續與大家分享更多幹貨~

原始碼地址： http://gitee.com/libaitianya/electron-vue-element-template

「其他文章」