📦electron-builder简单使用教程electron-builder 是一个强大的打包工具，用于将 Elec

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 项目或打包报错信息，也欢迎贴出来，我可以帮你具体分析！

📦electron-builder简单使用教程

🧰 一、安装 electron-builder