当前位置：首页 > news >正文

【Electron】应用打包教程（包含 C++ 后端 + 前端）

news 来源：原创 2025/6/8 9:35:25

📦 Electron 应用打包教程（包含 C++ 后端 + 前端）

本教程将手把手指导你在 Windows 下使用 Electron + electron-builder 创建并打包一个桌面应用，假设你已经拥有：

✅ 已构建好的 前端页面（HTML/CSS/JS）
✅ 已编译好的 C++ 后端程序（如 exe 文件）

你将学会：安装 Node.js、配置 npm、初始化项目、设置国内镜像、安装 Electron 和 electron-builder，并打包为安装包。

📁 1. 新建项目文件夹

mkdir MyElectronApp
cd MyElectronApp

📥 2. 安装 Node.js（附带 npm）

打开官网下载安装：
- https://nodejs.org/
- 推荐选择 LTS 版本
安装完成后，打开 PowerShell 运行验证：

node -v    # 查看 Node.js 版本
npm -v     # 查看 npm 版本

🌐 3. 配置 npm 国内镜像（永久生效）

npm config set registry https://registry.npmmirror.com

验证：

npm config get registry
# 输出应为 https://registry.npmmirror.com

🛠 4. 初始化 npm 项目

npm init -y

这会创建一个默认的 package.json 文件。

📦 5. 安装 Electron 与 electron-builder

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

📁 6. 项目结构建议

MyElectronApp/
├── dist/               # 前端构建后的文件（index.html）
├── backend/            # C++ 后端程序（已编译的 .exe 文件）
│   └── backend.exe
├── main.js             # Electron 主进程入口
├── package.json        # npm 配置
└── icon.ico            # 应用图标（可选）

📄 7. 创建 `main.js`

const { app, BrowserWindow } = require('electron');
const path = require('path');
const { spawn } = require('child_process');function createWindow() {const win = new BrowserWindow({width: 1000,height: 800,webPreferences: {nodeIntegration: true,contextIsolation: false}});win.loadFile(path.join(__dirname, 'dist/index.html'));// 启动后端程序（C++ 编译后的 exe 文件）const backend = spawn(path.join(__dirname, 'backend/backend.exe'));backend.stdout.on('data', data => console.log(`[后端] ${data}`));backend.stderr.on('data', data => console.error(`[后端错误] ${data}`));
}app.whenReady().then(createWindow);

⚙️ 8. 修改 `package.json`

添加启动命令和打包配置：

{"name": "my-electron-app","version": "1.0.0","main": "main.js","scripts": {"start": "electron .","build": "electron-builder"},"build": {"appId": "com.example.myapp","productName": "MyElectronApp","directories": {"output": "release"},"files": ["main.js","dist/**/*","backend/**/*"],"win": {"target": "nsis","icon": "icon.ico"},"nsis": {"oneClick": false,"perMachine": true,"allowToChangeInstallationDirectory": true}},"devDependencies": {"electron": "^27.1.1","electron-builder": "^24.14.1"}
}