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

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

1. 安裝依賴

首先，在你的項目中安裝 electron-builder：

npm install --save-dev electron-builder

同時，確保你已經(jīng)安裝了 Node.js 和 npm。此外，還需要在項目根目錄下創(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"
  }
}

這里有幾個關(guān)鍵配置項：

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

3. 添加資源文件

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

• build/resources/windows/icon.ico: 應用程序圖標。
• build/resources/windows/splash-screen.png: 啟動畫面（可選）。

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

4. 打包應用

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

npm run dist

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

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

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

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

npm run dist

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

總結(jié)

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

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

最新評論