如何在Electron-builder生成的.dmg中添加第三方.pkg文件？

核心思路 #

通过extraResources将PKG文件打包进DMG镜像，再通过dmg.contents配置它在DMG窗口中的显示位置，让它和应用图标、Applications快捷链接共存。

具体步骤 #

1. 放置PKG文件：将第三方PKG文件放到项目内的固定目录，比如assets/third-party.pkg。
2. 配置资源复制规则：在electron-builder配置文件（通常是package.json或electron-builder.yml）中，通过extraResources指定PKG文件的复制路径，确保它被打包进DMG根目录。
3. 配置DMG窗口内容：在dmg.contents数组中添加PKG文件的条目，定义它的显示位置和类型。

完整配置示例（以package.json为例） #

{
  "build": {
    "mac": {
      "target": "dmg",
      "extraResources": [
        {
          "from": "assets/third-party.pkg",
          "to": "./third-party.pkg"
        }
      ]
    },
    "dmg": {
      "contents": [
        {
          "x": 130,
          "y": 220,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 410,
          "y": 220,
          "type": "file",
          "path": "third-party.pkg"
        },
        {
          "x": 270,
          "y": 220,
          "type": "file",
          "path": "YourApp.app"
        }
      ]
    }
  }
}

关键配置说明 #

• extraResources：from是项目内PKG文件的相对路径，to是DMG中的目标路径（./表示DMG根目录），确保PKG被复制到正确位置。
• dmg.contents：
  • 每个对象对应DMG窗口中的一个元素，x/y控制图标位置，type指定是文件（file）还是链接（link）。
  • 示例中应用图标在中间，左边是Applications链接，右边是PKG文件，符合用户拖拽安装的操作习惯。
  • 替换YourApp.app为你实际生成的应用程序文件名。

内容的提问来源于stack exchange，提问作者Vlad