2024安装electron及打包工具(electron-builder)

前提条件

安装nodejs，并设置npm国内镜像。
参考：Node.js下载安装及环境配置教程【超详细】

electron及打包工具的安装指令

1.安装electron

# npm
npm install --save-dev electron

# yarn
yarn add --dev electron

由于国内网速问题，直接安装一般会失败。原因是安装electron会从GitHub拉取二进制文件。

2. 安装electron-builder（打包工具）
   electron的打包工具有多种，我使用的是electron-builder

# npm
npm install --save-dev electron-builder

# yarn （中文文档推荐使用。文档地址：http://electron.org.cn/builder/index.html）
yarn add electron-builder --dev

同样会因为国内网络问题，导致下载失败

国内环境下载

以下两种方法，任选一种即可：

1. 配置 electron 镜像
2. 使用 cnpm 安装

方法1： 配置 electron 镜像

国内的electron镜像有多个，如淘宝镜像、华为云，这里演示使用淘宝镜像。

按以下方式为 npm 或 yarn 配置 electron镜像 的用户环境变量以后，再重新安装 electron 或 electron-builder

# npm 设置electron镜像
npm config set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
# npm 设置electron-builder镜像
npm config set ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

# yarn 设置electron镜像
yarn config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/
# yarn 设置electron-builder镜像
yarn config set ELECTRON_BUILDER_BINARIES_MIRROR https://npmmirror.com/mirrors/electron-builder-binaries/

npm 在9.x以后的版本不能设置用户环境变量，解决办法：

1. 将 npm 版本降低到 8.x
2. （推荐）用其他包管理器替代 npm，如 yarn

参考

electron、electron-builder 镜像源配置（2022-06）

方法2： 使用 cnpm 安装

使用 cnpm 是比较方便的办法，在安装其他包时因为网络问题安装失败也可以尝试使用 cnpm 安装。

如果你不想使用 cnpm 作为你的项目的包管理工具，你也可以先使用 cnpm 在其他文件夹中安装一次electron，安装过后本地会有electron的缓存，然后再使用其他包管理工具在你的项目中安装electron，此时因为本地有缓存，会直接使用本地缓存文件，就不会因为从外网下载electron二进制文件导致安装失败。

安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

使用cnpm下载electron

# 安装为项目开发依赖
cnpm install -D electron

# 全局安装
cnpm install -g electron

使用cnpm安装electron-builder

# 安装为项目开发依赖
cnpm install -D electron-builder

# 全局安装
cnpm install -g electron-builder

其他方法

在网上看到，可以从网上（如： electron淘宝镜像）将 electron二进制文件 下载到本地存储 electron缓存 的位置（不同的操作系统位置不同，Win10存放本地electron缓存文件的位置是 C:\Users\ (你的用户名) \AppData\Local\electron\Cache）
这种方法有点麻烦，我没尝试过。

具体细节参考：

1. 不联网的情况下，使用 electron-builder 快速打包全平台应用
2. 自定义镜像和缓存

参考

Win10下安装electron,本人的安装过程