在使用 Electron 开发桌面应用时，最终目标通常是将应用打包成一个可执行文件（如 .exe 文件），以便分发给用户。以下是用 Electron 构建 .exe 应用的完整步骤：
1. 安装依赖
确保你已经安装了 Node.js 和 npm。然后，在项目根目录下运行以下命令，安装必要的依赖：
npm install electron --save-dev
npm install electron-builder --save-dev
electron: Electron 框架本身。electron-builder: 用于打包和分发应用的工具。
2. 初始化项目
如果你还没有一个 Electron 项目的结构，可以先创建基本的文件：
package.json
确保你的 package.json 文件中包含以下内容（如果不存在，则添加）：
{"name": "your-app-name","version": "1.0.0","description": "","main": "main.js","scripts": {"start": "electron .","build": "electron-builder"},"devDependencies": {"electron": "^27.0.0","electron-builder": "^24.0.1"}
}
main: 指定主进程文件为main.js。scripts.start: 启动应用的命令。scripts.build: 打包应用的命令。
3. 创建构建脚本
在 package.json 的 "scripts" 部分添加以下内容（如果还没有）：
{"scripts": {"start": "electron .","build": "electron-builder"}
}
这样，你就可以通过运行 npm run build 来构建应用。
4. 运行构建命令
在项目根目录下运行以下命令：
npm run build
- 这个命令会自动检测当前操作系统的架构，并生成适用于该平台的可执行文件。
- 如果你使用的是 Windows，它会生成
.exe文件。
5. 指定目标平台
如果你希望显式地为 Windows 构建 .exe 文件，可以运行以下命令：
npm run build -- --win
或者在 package.json 中配置脚本：
{"scripts": {"start": "electron .","build": "electron-builder","build:win": "electron-builder --win"}
}
然后运行：
npm run build:win
6. 构建输出
构建完成后，生成的文件会位于 dist 文件夹中。对于 Windows，你会看到以下内容：
your-app-name.exe: 可执行文件。- 其他支持文件和依赖项。
如果你希望将所有文件压缩成一个独立的 .exe 文件（即“单文件”构建），可以在命令中添加 --onefile 选项：
npm run build -- --win --onefile
7. 配置文件（可选）
为了更灵活地控制构建过程，可以创建一个配置文件 electron-builder.json 或 electron-builder.yml。例如：
{"appId": "com.yourcompany.yourapp","productName": "Your App Name","version": "1.0.0","directories": {"output": "dist"},"win": {"target": [{"target": "nsis","arch": ["x64","ia32"]}],"icon": "./resources/icon.ico" // 如果你有自定义图标}
}
这样，你可以指定应用的 ID、版本、输出目录等。
8. 测试构建后的文件
在 dist 文件夹中找到生成的 .exe 文件，并双击运行它。确保所有功能都能正常工作。
注意事项
- 依赖项: 确保你的项目中所有依赖项都已正确安装。
- 资源路径: 检查资源文件（如图片、配置文件等）的路径是否正确，因为打包后可能会改变文件结构。
- 跨平台兼容性: 如果你计划支持多个平台，请确保代码和资源在不同平台上都能正常工作。
进一步学习
如果需要更高级的功能（如自定义安装程序、签名等），可以参考 Electron Builder 文档。
通过以上步骤，你可以轻松地用 Electron 打包出一个 .exe 文件，并将其分发给 Windows 用户！
