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》

相关推荐
java1234_小锋4 小时前
【技术专题】HTML5 网页技术 - HTML5 Canvas 基础以及动画入门
前端·html·html5
知了学历孙老师7 小时前
小自考的校考和统考,出题方和难度差在哪
java·大数据·前端
ShineWinsu9 小时前
对于JavaScript:操作元素的解析
开发语言·前端·javascript·面试·web·dom·元素
福兮说10 小时前
JSON 格式正确,数据就可靠吗?我用一份自编配置检查类型与空值
java·前端·json
程序员老赵12 小时前
Docker 部署青龙面板:轻松搭建定时任务管理平台
前端·docker·开源
Swot12 小时前
Asciidoctor 公式数字下标错位问题:原因分析与解决方案
前端
Swot12 小时前
leo-editor 中将 Markdown 内容转成 asciidoc 格式
前端
狒狒AI12 小时前
Remotion / GSAP+Three / HyperFrames / Skia 四栈实测:代码渲染知识视频的选栈方法(附开源技能)
前端·人工智能·aigc
修炼的dance12 小时前
浏览器里导出H.265,8.5秒和55.5秒差在硬件
前端
补码缩写12 小时前
WebCodecs选编码器,探测之后还要验解码和播放
前端