打包 Electron 程序

梵尔纳多2025-12-28 10:33

设置镜像源

创建 .npmrc 文件，在文件中写入以下内容

bash 复制代码

registry=https://registry.npmmirror.com/
disturl=https://registry.npmmirror.com/-/binary/node/
sass_binary_site=https://registry.npmmirror.com/node-sass
phantomjs_cdnurl=https://registry.npmmirror.com/phantomjs
chromedriver_cdnurl=https://registry.npmmirror.com/-/binary/chromedriver/
operadriver_cdnurl=https://registry.npmmirror.com/-/binary/operadriver/
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
always-auth=false

安装打包工具

bash 复制代码

npm i -D electron-builder

编辑 package.json

json 复制代码

"scripts": {
    "start": "electron .",
    "build:win": "electron-builder --win --dir",
    "dist:win": "electron-builder --win",
    "build:linux": "electron-builder --linux --dir",
    "dist:linux": "electron-builder --linux",
    "build:macos": "electron-builder --macos --dir",
    "dist:macos": "electron-builder --macos"
  }

在这里我们在 scripts 里增加了几个构建项，分别是 window、linux 和 mac 平台下的打包命令。

bash 复制代码

npm run build:win

使用 npm run 执行不同构建项

其中 electron-builder -- ${platform} --dir 这个命令会在 dist 目录下生成一个$ {platform}-unpacked 的目录，里面包含了可执行文件及其依赖库；electron-builder -- ${platform} 在 windows 环境下会在 dist 目录下生成一个安装程序 setup.exe；linux 下则会生成一个 appimage 和 snap 文件，mac 环境笔者还未试过。