当前位置：首页 > news >正文

使用 Electron 打包 Windows 可执行程序

news 来源：原创 2025/5/25 4:44:52

使用 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 可以轻松地管理和定制你的构建过程，确保生成的应用程序符合预期的需求和标准。希望这个指南对你有所帮助！