使用 Electron 打包 Windows 可執(zhí)行程序

在使用 Electron 構(gòu)建桌面應(yīng)用程序時(shí)，通常需要將項(xiàng)目打包為可執(zhí)行文件（例如 .exe 文件），以便用戶可以方便地安裝和運(yùn)行。本文將介紹如何使用 electron-builder 將 Electron 項(xiàng)目打包成 Windows 的可執(zhí)行程序。

1. 安裝依賴(lài)

首先，在你的項(xiàng)目中安裝 electron-builder：

npm install --save-dev electron-builder

同時(shí)，確保你已經(jīng)安裝了 Node.js 和 npm。此外，還需要在項(xiàng)目根目錄下創(chuàng)建或更新 package.json 文件以包含必要的配置信息。

2. 配置 package.json

編輯 package.json 文件，添加構(gòu)建腳本和打包所需的配置：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "build": {
    "appId": "com.example.my-electron-app",
    "productName": "My Electron App",
    "win": {
      "target": [
        "nsis" // 使用 NSIS 打包
      ]
    }
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "^23.0.0",
    "electron-builder": "^23.6.0"
  }
}

這里有幾個(gè)關(guān)鍵配置項(xiàng)：

• appId: 應(yīng)用程序的唯一標(biāo)識(shí)符。
• productName: 應(yīng)用程序的顯示名稱(chēng)。
• win.target: 指定 Windows 打包目標(biāo)，常用的有：
  • nsis：使用 Nullsoft Scriptable Install System 創(chuàng)建安裝程序。
  • portable: 創(chuàng)建一個(gè)便攜式應(yīng)用程序。

3. 添加資源文件

為了生成更友好的應(yīng)用圖標(biāo)和窗口圖標(biāo)，你可以在項(xiàng)目根目錄下創(chuàng)建或更新以下文件：

• build/resources/windows/icon.ico: 應(yīng)用程序圖標(biāo)。
• build/resources/windows/splash-screen.png: 啟動(dòng)畫(huà)面（可選）。

你可以使用在線工具將 PNG 圖片轉(zhuǎn)換為 ICO 格式，例如 ConvertICO 或其他類(lèi)似服務(wù)。

4. 打包應(yīng)用

現(xiàn)在可以運(yùn)行打包命令來(lái)生成 Windows 可執(zhí)行程序：

npm run dist

這會(huì)觸發(fā) electron-builder 進(jìn)行構(gòu)建，并在項(xiàng)目目錄下的 dist 文件夾中生成安裝文件。默認(rèn)情況下，使用 NSIS 創(chuàng)建的安裝程序?qū)⑽挥?dist/win-unpacked 目錄下。

5. 驗(yàn)證打包結(jié)果

打開(kāi) dist/win-unpacked 文件夾，你應(yīng)該會(huì)看到一個(gè)可執(zhí)行文件（例如 My Electron App.exe），雙擊該文件即可啟動(dòng)你的應(yīng)用程序。此外，你還可以找到相應(yīng)的 .exe 和其他必要的資源文件。

如果你希望生成帶有安裝向?qū)У陌惭b程序（.exe 安裝包），可以使用以下命令：

npm run dist

這會(huì)生成一個(gè)包含安裝向?qū)У?.exe 文件，通常位于 dist 目錄下。

總結(jié)

通過(guò)上述步驟，你可以將 Electron 項(xiàng)目打包為 Windows 的可執(zhí)行程序，并提供方便的安裝體驗(yàn)。使用 electron-builder 可以輕松地管理和定制你的構(gòu)建過(guò)程，確保生成的應(yīng)用程序符合預(yù)期的需求和標(biāo)準(zhǔn)。希望這個(gè)指南對(duì)你有所幫助！

到此這篇關(guān)于如何使用 Electron 打包 Windows 可執(zhí)行程序 的文章就介紹到這了,更多相關(guān)Electron 打包 Windows 可執(zhí)行程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論