如何使用 Electron 打包 Windows 可执行程序

使用 Electron 打包 Windows 可执行程序

在使用 Electron 构建桌面应用程序时，通常需要将项目打包为可执行文件（例如 .exe 文件），以便用户可以方便地安装和运行。本文将介绍如何使用 electron-builder 将 Electron 项目打包成 Windows 的可执行程序。

1. 安装依赖

首先，在你的项目中安装 electron-builder：

npm install --save-dev electron-builder

同时，确保你已经安装了 Node.js 和 npm。此外，还需要在项目根目录下创建或更新 package.json 文件以包含必要的配置信息。

2. 配置 package.json

编辑 package.json 文件，添加构建脚本和打包所需的配置：

{
  "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"
  }
}

这里有几个关键配置项：

• appId: 应用程序的唯一标识符。
• productName: 应用程序的显示名称。
• win.target: 指定 Windows 打包目标，常用的有：
  • nsis：使用 Nullsoft Scriptable Install System 创建安装程序。
  • portable: 创建一个便携式应用程序。

3. 添加资源文件

为了生成更友好的应用图标和窗口图标，你可以在项目根目录下创建或更新以下文件：

• build/resources/windows/icon.ico: 应用程序图标。
• build/resources/windows/splash-screen.png: 启动画面（可选）。

你可以使用在线工具将 PNG 图片转换为 ICO 格式，例如 ConvertICO 或其他类似服务。

4. 打包应用

现在可以运行打包命令来生成 Windows 可执行程序：

npm run dist

这会触发 electron-builder 进行构建，并在项目目录下的 dist 文件夹中生成安装文件。默认情况下，使用 NSIS 创建的安装程序将位于 dist/win-unpacked 目录下。

5. 验证打包结果

打开 dist/win-unpacked 文件夹，你应该会看到一个可执行文件（例如 My Electron App.exe），双击该文件即可启动你的应用程序。此外，你还可以找到相应的 .exe 和其他必要的资源文件。

如果你希望生成带有安装向导的安装程序（.exe 安装包），可以使用以下命令：

npm run dist

这会生成一个包含安装向导的 .exe 文件，通常位于 dist 目录下。

总结

通过上述步骤，你可以将 Electron 项目打包为 Windows 的可执行程序，并提供方便的安装体验。使用 electron-builder 可以轻松地管理和定制你的构建过程，确保生成的应用程序符合预期的需求和标准。希望这个指南对你有所帮助！

到此这篇关于如何使用 Electron 打包 Windows 可执行程序 的文章就介绍到这了,更多相关Electron 打包 Windows 可执行程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！