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》

相关推荐
passer9815 分钟前
基于webpack的场景解决
前端·webpack
华科云商xiao徐12 分钟前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
奶昔不会射手19 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy22 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy29 分钟前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵29 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js
用户4582031531733 分钟前
10个你可能不知道的实用CSS技巧,立竿见影提升开发效率
前端·css
在逃牛马33 分钟前
【Uni-App+SSM+MP 宠物实战】Day4:Uni-App 项目初始化
前端