【Electron】Electron-builder实战：从零到打包上线的完整避坑指南

最新推荐文章于 2026-06-01 11:06:37 发布

原创

最新推荐文章于 2026-06-01 11:06:37 发布 · 916 阅读

1. 环境准备：别急着敲代码，先把路铺好

很多新手朋友一上来就照着官方文档 npm init、npm install，结果第一步就卡住了，不是网络超时就是依赖下载失败。我刚开始用 Electron-builder 的时候也这样，急吼吼地想看到打包成果，结果在环境配置上就浪费了大半天。所以咱们的第一步，不是写代码，而是把打包的“高速公路”给修好，确保后续流程畅通无阻。

首先，你得有个像样的开发环境。Node.js 是必须的，这里有个小坑：别用太新的版本。Electron 和它庞大的依赖生态对新版 Node 的支持有时会滞后。我实测下来，Node.js 16.x 或 18.x 的 LTS（长期支持版）是最稳的。你可以用 node -v 和 npm -v 检查一下。如果版本太高，建议用 nvm（Node Version Manager）切到一个稳定版本，这会避免很多莫名其妙的模块兼容性问题。

接下来是 Electron-builder 本身。官方会让你 npm install electron-builder -D。但这里我强烈建议你先配置镜像源，而且是双管齐下。因为 Electron-builder 在打包过程中会下载两样东西：一是 Electron 本身的二进制文件（比如 electron-v27.0.0-win32-x64.zip），二是它自己需要的一些构建工具，比如制作 Windows 安装包需要的 nsis 和 winCodeSign。这两者的下载源是分开的。

所以，在安装任何东西之前，先打开你的终端（命令行），执行下面这两条命令：

npm config set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
npm config set ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

注意，我这里用的已经是 npmmirror.com 这个域名了，它替代了原来的淘宝镜像（npm.taobao.org），更加稳定。这两行命令相当于给你的 npm 装上了“加速器”，后续下载 Electron 本体和 builder 的工具时，速度会快很多，从根源上避免了“网速过慢导致打包出错”的问题。

配置好镜像，我们再创建一个新的项目目录，进去执行 npm init -y 快速生成 package.json。然后，再执行 npm install electron-builder -D。这时候你会看到下载速度飞起，心情也会舒畅不少。记住，-D 参数代表这是开发依赖，只会安装在你的项目里，不会被打进最终的用户软件包中。