📦electron-builder简单使用教程

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


🧰 一、安装 electron-builder

你可以通过 npmyarn 安装:

bash 复制代码
npm install --save-dev electron-builder
# 或者
yarn add --dev electron-builder

📁 二、项目结构建议

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

⚙️ 三、配置 package.json

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

json 复制代码
{
  "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"
  }
}

🚀 四、打包命令

在终端中运行:

bash 复制代码
npm run build

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

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

🛠️ 五、常见选项说明

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

📦 六、生成多平台安装包(可选)

你可以在 macOS 上打包 Windows 或 Linux 安装包(或使用 CI 工具),但需要设置:

bash 复制代码
electron-builder --mac --win --linux

或者在 package.json > scripts 添加:

json 复制代码
"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 配置项
打包失败 查看终端错误信息,可能是缺失依赖或路径错误
中文乱码或路径问题 尽量避免中文路径,或使用英文目录结构

📚 官方文档


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

相关推荐
誰能久伴不乏14 分钟前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端
涔溪1 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
今禾1 小时前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的1 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
我想说一句1 小时前
掘金移动端React开发实践:从布局到样式优化的完整指南
前端·react.js·前端框架
jqq6661 小时前
Vue3脚手架实现(九、渲染typescript配置)
前端
码间舞2 小时前
Zustand 与 useSyncExternalStore:现代 React 状态管理的极简之道
前端·react.js
Dream耀2 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
冰菓Neko2 小时前
HTML 常用标签速查表
前端·html
gis收藏家2 小时前
从稀疏数据(CSV)创建非常大的 GeoTIFF(和 WMS)
前端