# electron-hello-world
**Repository Path**: ama_tor/electron-hello-world
## Basic Information
- **Project Name**: electron-hello-world
- **Description**: Electron经典入门 |创建“Hello World”桌面应用，并将其打包成 Windows 可执行文件（.exe）
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-29
- **Last Updated**: 2026-03-29
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 标题Electron经典入门 |创建“Hello World”桌面应用，并将其打包成 Windows 可执行文件（.exe）
分为 **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.com
```
---
### 3. 解决打包时的“大文件”下载慢（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 项目。
1. 新建一个文件夹，例如 `electron-hello-world`。
2. 打开命令行工具（如 PowerShell 或 CMD），进入该文件夹。
3. 运行以下命令初始化项目并安装 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` (页面内容)
```
Hello Electron
Hello World! 🚀
```
#### 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 build
```
#### 4. 查看结果
打包完成后，你会在项目目录下发现一个名为 **`dist`** 的文件夹。编辑
- 进入 `dist` -> `win-unpacked`：里面是直接运行的 `.exe` 文件（便携版）。
- 进入 `dist`：里面有一个 `HelloWorldApp Setup 1.0.0.exe`，这就是安装包。