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

最新推荐文章于 2026-07-24 15:15:28 发布

原创最新推荐文章于 2026-07-24 15:15:28 发布 · 928 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

c++

Electron

📦 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"
  }
}