📦electron-builder简单使用教程

electron-builder 是一个强大的打包工具，用于将 Electron 应用程序打包成 Windows、macOS 和 Linux支持的运行程序。

---

🧰 一、安装 electron-builder

你可以通过 npm 或 yarn 安装：

npm install --save-dev electron-builder
# 或者
yarn add --dev electron-builder

---

📁 二、项目结构建议

your-app/
├── package.json
├── main.js         ← Electron 主进程入口
├── preload.js      ← 可选
├── renderer/       ← 前端页面
├── dist/           ← 打包输出目录
└── build/          ← 可选，放置图标、配置等资源

---

⚙️ 三、配置 package.json

在 package.json 中添加 build 字段来配置打包信息：

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.example.myapp",
    "productName": "MyApp",
    "directories": {
      "output": "dist"
    },
    "files": [
      "**/*",
      "!dist"
    ],
    "win": {
      "target": "nsis",
      "icon": "build/icon.ico"
    },
    "mac": {
      "target": "dmg",
      "icon": "build/icon.icns"
    },
    "linux": {
      "target": "AppImage",
      "icon": "build"
    }
  },
  "devDependencies": {
    "electron": "^25.0.0",
    "electron-builder": "^24.0.0"
  }
}

---

🚀 四、打包命令

在终端中运行：

npm run build

根据你当前系统，electron-builder 会自动构建对应平台的安装包：

• Windows → .exe 安装程序
• macOS → .dmg 文件
• Linux → .AppImage 或 .deb

---

🛠️ 五、常见选项说明

选项	说明
appId	应用唯一 ID，通常为反向域名格式
productName	应用显示名称
directories.output	构建输出目录
files	指定要打包的文件（支持 glob）
extraResources	附加资源（如数据库、配置文件）
win.target	Windows 安装包类型，如 nsis、portable
mac.target	mac 安装包类型，如 dmg、zip
linux.target	Linux 包类型，如 AppImage、deb

---

📦 六、生成多平台安装包（可选）

你可以在 macOS 上打包 Windows 或 Linux 安装包（或使用 CI 工具），但需要设置：

electron-builder --mac --win --linux

或者在 package.json > scripts 添加：

"scripts": {
  "build:all": "electron-builder --mac --win --linux"
}

⚠️ 注意：打包 Windows 安装包建议在 Windows 系统下进行，或使用 electron-builder 的 Docker 镜像 或 GitHub Actions。

---

📁 七、打包输出内容

打包完成后会在 dist/ 目录生成如下文件：

• Windows: MyApp Setup 1.0.0.exe
• macOS: MyApp-1.0.0.dmg
• Linux: MyApp-1.0.0.AppImage 或 .deb

---

✅ 常见问题

问题	解决方法
图标不显示	确保 .ico 或 .icns 文件路径正确
文件未打进包	检查 files 配置项
打包失败	查看终端错误信息，可能是缺失依赖或路径错误
中文乱码或路径问题	尽量避免中文路径，或使用英文目录结构

---

📚 官方文档

• 官网: www.electron.build
• GitHub: github.com/electron-us...

---

如果你有具体的 Electron 项目或打包报错信息，也欢迎贴出来，我可以帮你具体分析！