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》

相关推荐
小杨同学yx1 分钟前
前端三剑客之Css---day3
前端·css
星月心城1 小时前
Promise之什么是promise?(01)
javascript
二川bro1 小时前
第二篇:Three.js核心三要素:场景、相机、渲染器
开发语言·javascript·数码相机
Mintopia2 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九2 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
小西↬2 小时前
vite+vue3+websocket处理音频流发送到后端
javascript·websocket·音视频
Mintopia3 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
wb1893 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
烛阴3 小时前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript
Entropy-Lee4 小时前
JavaScript 语句和函数
开发语言·前端·javascript