分为 4 个步骤：初始化项目、编写代码、本地运行、最后打包。
前置动作：配置几个镜像
由于国内网络环境的特殊性，直接从国外的官方源（如 npmjs、GitHub）下载 Electron、Node.js 原生模块或打包工具（如 electron-builder）通常会非常慢，甚至失败。
为了让你的 Electron 项目顺利运行和打包，我们需要配置几个关键的镜像源。
以下是针对 Electron、Node.js 依赖（npm/yarn）、Python 和 Windows 编译工具 的全方位加速方案。
1、配置Electron镜像源：
方法一：设置环境变量（推荐，一劳永逸）
start+r→sysdm.cpl→配置系统环境变量：
验证是否成功
你可以打开一个新的 PowerShell 窗口，输入：
bash
echo $env:ELECTRON_MIRROR如果屏幕上输出了 https://npmmirror.com/mirrors/electron/，说明设置成功了。
方法二：在 package.json 中配置
你也可以直接在 package.json 中添加 electron_mirror 字段：
{
"name": "your-app",
"version": "1.0.0",
"main": "main.js",
"config": {
"electron_mirror": "https://npmmirror.com/mirrors/electron/"
},
"devDependencies": {
"electron": "^32.0.0"
}
}2. 配置 npm 或 yarn 镜像
安装 electron-builder、webpack 等普通依赖包时，需要配置 npm 或 yarn 的源。
如果你使用 npm
设置淘宝镜像：
npm config set registry https://registry.npmmirror.com如果你使用 yarn
设置淘宝镜像：
yarn config set registry https://registry.npmmirror.com3. 解决打包时的"大文件"下载慢（electron-builder）
electron-builder 在打包时，需要下载 Windows 的代码签名工具（如 winCodeSign）和 Electron 的二进制发布包。这些默认也是从 GitHub 下载，非常慢。
解决方案：设置 electron-builder 的镜像
在你的 package.json 中，添加 build 字段来指定镜像源：
bash
{
"name": "your-app",
"version": "1.0.0",
"build": {
"electronDownload": {
"mirror": "https://npmmirror.com/mirrors/electron/"
}
}
}4. 解决 Node.js 原生插件编译慢（node-gyp）
当你安装包含 C++ 代码的依赖（比如某些数据库驱动）时，Node.js 会尝试下载 Windows 编译工具（如 node.lib），这一步也经常卡住。
解决方案：配置 node-gyp 镜像
同样使用环境变量，指向淘宝的 Node.js 镜像：
bash
# PowerShell
$env:nodejs_mirror="https://npmmirror.com/mirrors/node/"
$env:python_mirror="https://npmmirror.com/mirrors/python/"第一步：初始化项目
我们需要先创建一个空的文件夹并初始化 Node.js 项目。
- 新建一个文件夹，例如
electron-hello-world。 - 打开命令行工具（如 PowerShell 或 CMD），进入该文件夹。
- 运行以下命令初始化项目并安装 Electron：
bash
# 初始化 package.json
npm init -y
# 安装 Electron (注意：如果你使用 yarn，请将 npm 替换为 yarn)
npm install electron --save-dev查electron版本：npx electron --version
第二步：编写代码
在项目根目录下创建以下 3 个文件：
1. main.js (主进程 - 必须有)
这是应用的入口，负责创建窗口。
javascript
// main.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
// 加载 index.html
win.loadFile('index.html')
}
// 当 Electron 完全启动后调用
app.whenReady().then(createWindow)
// 退出逻辑
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})2. index.html (页面内容)
<!DOCTYPE html>
<html>
<head>
<title>Hello Electron</title>
</head>
<body>
<h1 style="text-align: center; margin-top: 100px;">
Hello World! 🚀
</h1>
</body>
</html>3. package.json (配置文件)
你需要修改 package.json，添加启动脚本和 Electron 的入口配置。
javascript
{
"name": "electron-hello-world",
"version": "1.0.0",
"build": {
"electronDownload": {
"mirror": "https://npmmirror.com/mirrors/electron/"
}
},
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "commonjs",
"dependencies": {
"electron": "^41.1.0"
}
}第三步：本地运行 (测试)
在命令行中运行以下命令，如果看到一个窗口弹出并显示"Hello World"，说明代码没问题。
npm start
第四步：打包成 EXE (关键步骤)
我们要使用 electron-builder 来打包。这是最推荐的打包工具。
1. 安装打包工具
javascript
npm install electron-builder --save-dev查看版本：
npx electron-builder --version
2. 修改 package.json
在 package.json 中添加 build 配置，并修改 scripts。
javascript
{
... // 前面的内容保持不变
"scripts": {
"start": "electron .",
"build": "electron-builder"
},
"build": {
"appId": "com.example.helloworld",
"productName": "HelloWorldApp",
"win": {
"target": "nsis" // 打包成 Windows 安装包
},
"nsis": {
"oneClick": false, // 制作向导式安装包
"allowToChangeInstallationDirectory": true
}
}
}3. 执行打包命令
先指定electron-builder-binaries镜像：$env:ELECTRON_BUILDER_BINARIES_MIRROR="https://npmmirror.com/mirrors/electron-builder-binaries/"
管理员权限下运行以下命令：
javascript
npm run build4. 查看结果
打包完成后，你会在项目目录下发现一个名为 dist 的文件夹。
- 进入
dist->win-unpacked：里面是直接运行的.exe文件（便携版）。 - 进入
dist：里面有一个HelloWorldApp Setup 1.0.0.exe，这就是安装包。