electron-builder打包后无法加载preload.js预加载脚本如何解决？

问题根因 #

你当前的配置存在两处核心冲突：

• 同时在files、extraResources、extraFiles中配置了preload.js的打包规则，extraResources的作用就是将指定文件输出到app.asar外的Resources目录，不会被打进asar包内
• 代码中preload路径使用app.getAppPath()拼接，该路径在打包后默认指向app.asar内部根目录，和实际文件存放位置不匹配

解决方案 #

方案1：将preload.js打包进asar（推荐） #

1. 清理冗余打包配置，删除build下的extraResources、extraFiles字段中所有和preload.js、../app/src/*相关的配置，仅保留files字段的必要规则：

"build": {
  "extends": null,
  "appId": "com.app",
  "productName": "App",
  "directories": {
    "output": "dist"
  },
  "mac": {
    "target": {
      "target": "pkg",
      "arch": [
        "universal"
      ]
    },
    "darkModeSupport": "true",
    "extendInfo": "app"
  },
  "pkg": {
    "installLocation": "/Applications",
    "overwriteAction": "upgrade"
  },
  "files": [
    "**/*",
    "src/preload.js"
  ]
}

如果你的项目是monorepo结构，调整files里的相对路径和你的实际目录结构匹配即可。

2. 修改electron.js中的preload路径写法，使用__dirname适配开发、生产双环境：

webPreferences: {
  // 路径根据electron.js和preload.js的相对位置调整，示例为electron.js在项目根目录、preload.js在src目录下的写法
  preload: path.join(__dirname, 'src/preload.js'),
  contextIsolation: true,
}

方案2：保持preload.js在asar外部 #

如果你的场景确实需要preload.js放在asar外，不需要修改打包配置，仅调整electron.js中的preload路径即可：

webPreferences: {
  preload: path.join(process.resourcesPath, 'src/preload.js'),
  contextIsolation: true,
}

process.resourcesPath在打包后会指向Resources目录的绝对路径，可以直接匹配到你当前配置输出的preload.js位置。

验证方法 #

打包后执行npx asar extract 你的安装包路径/Contents/Resources/app.asar ./unpacked，解压app.asar查看内部是否存在src/preload.js，确认路径匹配即可。

内容的提问来源于stack exchange，提问作者Mr. Robot