Electron-forge打包Vue等项目为deb,exe等详解（完整代码）

国产系统麒麟操作系统软件，Vue项目适配，打包成deb,可供麒麟操作系统安装的软件

• 麒麟V10系统
• node v18

本流程打包用了Electron Forge脚手架

Electron Forge 是一款用于打包和分发 Electron 应用程序的一体化工具。它结合了许多单一用途的软件包，创建了一个完整的开箱即用的构建管道，包括代码签名、安装程序和工件发布。对于高级工作流程，可以通过其插件 API在 Forge 生命周期中添加自定义构建逻辑。可以通过创建自己的Makers和Publishers来处理自定义构建和存储目标。

前提

本打包流程可以在原有项目之上进行操作（推荐node>16）

如果版本差距过大，可以考虑单独新创建一个项目，原有项目打包之后的dist文件假进行替换新项目的/dist文件即可

一、👻生成forge.config.js👻

npx electron-forge import

会生成一个新的文件forge.config.js

const { FusesPlugin } = require('@electron-forge/plugin-fuses');
const { FuseV1Options, FuseVersion } = require('@electron/fuses');

module.exports = {
  packagerConfig: {
    asar: true,
  },
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {},
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin'],
    },
    {
      name: '@electron-forge/maker-deb',
      config: {},
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },
  ],
  plugins: [
    {
      name: '@electron-forge/plugin-auto-unpack-natives',
      config: {},
    },
    // Fuses are used to enable/disable various Electron functionality
    // at package time, before code signing the application
    new FusesPlugin({
      version: FuseVersion.V1,
      [FuseV1Options.RunAsNode]: false,
      [FuseV1Options.EnableCookieEncryption]: true,
      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
      [FuseV1Options.EnableNodeCliInspectArguments]: false,
      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
      [FuseV1Options.OnlyLoadAppFromAsar]: true,
    }),
  ],
};

如果用不到这个

    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },

最好把这个删掉，以防出错

🍭makers🍭

makers字段用于指定不同平台的打包格式。每个打包格式都对应一个maker，定义了如何生成特定格式的安装包。可以根据需要添加或修改makers字段的配置。以下是常见的几种打包格式及其相应的maker配置：

• Windows的.exe安装包：使用@electron-forge/maker-squirrel作为maker，可以配置应用名称等参数。
• macOS的.dmg安装包：使用@electron-forge/maker-zip作为maker，指定platforms为darwin。
• Debian Linux的.deb安装包：使用@electron-forge/maker-deb作为maker，可以配置其他参数。
• Red Hat Linux的.rpm安装包：使用@electron-forge/maker-rpm作为maker，可以配置其他参数。

根据目标平台的需求，进行相应的配置。

完成以上配置后，就可以使用Electron-forge生成针对不同平台的安装包了。通过修改makers字段的配置，可以灵活地定制生成的应用格式。在文章的后续部分将详细介绍如何执行打包命令以及生成不同平台的应用格式的步骤。

🍭packagerConfig🍭

packagerConfig字段用于配置打包器的选项。可以在其中指定一些自定义的打包参数，例如输出目录、应用名称、图标等。根据需求，对该字段进行相应的配置（下面是一些常用的配置）。

packagerConfig: {
  // 基础配置（一般这些就够用了）
  "name": "MyElectronApp", // 应用程序的名称
  "productName": "My Electron App", // 产品名称（用于生成安装包的名称）
  "icon": "path/to/icon.png", // 应用程序的图标路径
  "out": "build/", // 输出目录的路径
  "overwrite": true, // 是否覆盖已存在的打包文件
  "asar": true, // 是否使用asar打包格式
  "version": "1.0.0", // 应用程序版本号
  "copyright": "Copyright © 2023", // 版权信息
  "ignore": [ // 不需要打包的文件和文件夹的路径列表
    ".git",
    ".vscode",
    "node_modules/.cache",
    "src"
  ],
  // 配置其他构建器（特殊情况下使用）
  "win": { // Windows平台的配置
    "target": "nsis", // 打包的目标格式为NSIS安装程序
    "icon": "path/to/windows/icon.ico", // Windows平台的图标路径
    "publisherName": "My Company", // 发布者名称
    "fileAssociations": [ // 关联文件类型的配置
      {
        "ext": "myext", // 文件扩展名
        "name": "My Extension", // 文件类型名称
        "description": "Open My Extension files", // 文件类型描述
        "role": "Editor" // 文件类型的角色
      }
    ],
    "certificateFile": "path/to/certificate.pfx", // 数字证书文件的路径
    "certificatePassword": "password123" // 数字证书的密码
  },
  "mac": { // macOS平台的配置
    "target": "dmg", // 打包的目标格式为DMG镜像
    "icon": "path/to/mac/icon.icns", // macOS平台的图标路径
    "category": "public.app-category.utilities", // 应用程序的分类
    "extendInfo": { // 扩展应用程序包的配置
      "NSAppTransportSecurity": {
        "NSAllowsArbitraryLoads": true // 允许应用程序加载任意的网络资源
      }
    }
  },
  "linux": { // Linux平台的配置
    "target": "deb", // 打包的目标格式为DEB包
    "icon": "path/to/linux/icon.png", // Linux平台的图标路径
    "category": "Utility", // 应用程序的分类
    "description": "My Electron App", // 应用程序的描述
    "desktop": { // 创建桌面快捷方式的配置
      "Name": "My Electron App", // 快捷方式的名称
      "Comment": "My Electron App", // 快捷方式的注释
      "Exec": "./MyElectronApp", // 快捷方式的执行命令
      "Terminal": false // 是否在终端中打开应用程序
    }
  }
}

还有更多的功能和配置项，请详见官方文档

二、👻新建main.js👻

这里的main.js是针对于electron的入口文件

在项目根目录上新建electron文件夹，在此目录下新建`electronMain.js

内容如下

/**
 * electron 的主进程
 */
// 导入模块
const { app, BrowserWindow } = require('electron')
const path = require('path')

// 创建主窗口
const createWindow = () => {
  const win = new BrowserWindow({    // 可以在这里配置
    width: 800,
    height: 600,
    icon: path.join(__dirname,'resources/icon.ico'),
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      webSecurity: false,
    }
  })
  win.loadFile('dist/index.html')
}


// 应用准备就绪，加载窗口
app.whenReady().then(() => {
  createWindow()
  // mac 上默认保留一个窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })

  console.log('--- app ready ---')
})

// 关闭所有窗口 ： 程序退出 ： windows & linux
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

同时也需要在package.json中增加一些配置

{
    ...
    "main": "electron/electronMain.js",
    "scripts": {
        ...
        "dev:electron": "electron .",
        "start": "electron-forge start",
        "package": "electron-forge package",  //打成对应的window应用包
        "make": "electron-forge make"   // 根据当前环境打对应的安装包
    },
    "author": {
        "name": "xxx",
        "email": "xxx"
    },
    "description": "xxx",
    "license": "xxx"
}

以上缺失的都需要补充，要不然会出现错误

三、👻打包👻

切记，打不同平台的包，最好需要在对应的平台上操作。

首先我们先进行普通的打包npm run build, 我的输出目录是在/dist

用下面命令进行打包

npm run make

你可以使用以下选项来指定目标系统架构、运行平台和目标文件：

• -a, --arch [arch]：目标系统架构，默认为x64
• -p, --platform [platform]：运行平台，默认为当前系统编译环境
• –targets [targets]：与maker的作用一样，建议在文件中配置，便于管理
  执行完make命令后，在根目录下将生成一个out文件夹。out/make文件夹中包含了打包后的应用分发包。

😭打包成deb踩的坑-- 1

An unhandled rejection has occurred inside Forge:
Error: Cannot make for rpm, the following external binaries need to be installed: rpmbuild
...

解决链接

sudo apt install rpm

😭打包成deb踩的坑-- 2

linux可能会因为网络问题，会打包失败，可以

ping 对应的ip

如果能通，就多试几次打包

➡️相关链接

使用Electron生成安装包并打包为不同平台的应用格式

npm.js

官方文档