Electron 应用打包全指南

一、为何需要打包?

Electron 核心模块不包含打包工具 ,开发模式的应用必须通过额外工具转换为可分发包(Distributable),例如:

  • Windows 的 .msi 安装包
  • macOS 的 .dmg.app 便携包
  • Linux 的 .deb 等格式

二、Electron Forge 工作流(推荐方案)

整合了 @electron/packager@electron/osx-sign 等工具链

  1. 安装与项目导入

    在项目中添加 CLI 并执行转换:

    bash 复制代码
    npm install --save-dev @electron-forge/cli
    npx electron-forge import

    关键变化

    • package.json 新增脚本命令:

      json 复制代码
      "scripts": {
        "start": "electron-forge start",
        "package": "electron-forge package",
        "make": "electron-forge make"
      }
    • 生成 forge.config.js 配置文件(含多平台 Maker 预设)

  2. 生成可分发包

    执行构建命令:

    bash 复制代码
    npm run make  # 内部自动执行 package → make 两步

    输出结构

    复制代码
    out/
    ├── make/          # 分发安装包(如 ZIP/DMG)
     └── packaged-app/  # 含 Electron 二进制的应用包

    *示例:macOS 生成 my-electron-app.app.zip 安装包 *

  3. 多平台格式支持

    forge.config.js 配置 Makers 可定制输出格式:

    • Windows: Squirrel (MSI), WiX
    • macOS: DMG, PKG
    • Linux: deb, rpm
      *详见 Makers 文档 *

三、代码签名(关键安全步骤)

必须操作:否则系统将阻止安装/运行!

  • macOS :签名应用包(.app

    js 复制代码
    // forge.config.js
    packagerConfig: {
      osxSign: {}, 
      osxNotarize: { // 公证配置
        appleId: process.env.APPLE_ID, 
        appleIdPassword: process.env.APPLE_PASSWORD
      }
    }
  • Windows :签名安装包(.msi

    js 复制代码
    makers: [{
      name: '@electron-forge/maker-squirrel',
      config: {
        certificateFile: './cert.pfx', 
        certificatePassword: process.env.CERT_PWD
      }
    }]

    *注:证书需提前申请,敏感信息使用环境变量传递 *


四、进阶配置

技术依据:Electron 官方文档《Packaging Your Application》

相关推荐
炫饭第一名1 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫1 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊1 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter1 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折2 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_2 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
Angelial2 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu2 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端
jiayu2 小时前
Angular6学习笔记13:HTTP(3)
前端
小码哥_常2 小时前
Kotlin抽象类与接口:相爱相杀的编程“CP”
前端