Electron：electron-builder无法加载preload脚本问题排查求助

首先，咱们先抓最可能的直接原因：你在新版本的webPreferences里错误地添加了frame: false属性——这个属性是属于BrowserWindow的顶层配置选项，根本不属于webPreferences范畴！把它放在这里会导致Electron解析web配置时出现异常，直接干扰了preload脚本的加载流程。

接下来咱们拆解其他可能的影响因素，以及对应的解决方案：

1. 修正webPreferences的配置错误 #

把webPreferences里的frame: false删掉，这个配置应该放在BrowserWindow的参数顶层，和width、height同级。修正后的窗口创建代码应该是这样：

const win = new BrowserWindow({ 
  width: 1400, 
  height: 900, 
  frame: false,  // 移到这里才对！
  title: title.name, 
  webPreferences: { 
    webviewTag: true, 
    nodeIntegration: true, 
    enableRemoteModule: true, 
    nodeIntegrationInWorker: true, 
    preload: path.join(`${__dirname}/electron`, 'preload.js'), 
  }, 
});

这一步大概率能解决你的加载失败问题，因为配置解析错误是最常见的触发这类报错的原因。

2. 适配Electron 10+的路径处理逻辑 #

Electron 10及以上版本对asar包内的路径处理有一些细微调整，__dirname在打包后的环境中可能不如旧版本稳定。建议改用app.getAppPath()来构建preload路径，确保无论开发还是打包环境都能正确定位到脚本：

const { app } = require('electron');
// ...
preload: path.join(app.getAppPath(), 'electron', 'preload.js'),

这样能避免因为asar包的路径映射问题导致找不到preload文件。

3. 关于你提到的属性兼容性问题 #

咱们逐一分析你说的两个差异属性：

• enableRemoteModule：Electron 10+开始这个属性默认值是false，你手动设为true是正确的（不过要注意这个模块在Electron 14之后被标记为弃用，后续建议改用@electron/remote替代，但11版本还能正常使用），这个属性本身不会导致preload加载失败。
• nodeIntegrationInWorker：这个属性在Electron 11中是完全支持的，和preload加载没有直接冲突，只要你的worker进程配置正确，就不会有问题。

4. 额外排查点 #

如果前面的步骤都做了还是报错，建议检查：

• preload脚本本身是否有语法错误（比如使用了Electron 11不支持的Node.js特性，不过Electron 11基于Node 12.18.3，和Electron 8的Node 12.13.0差异不大，概率较低）；
• 确认打包后的asar包内确实存在electron/preload.js文件——可以用asar extract命令解压app.asar检查文件结构是否正确。

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