带有 browserWindow 和 preload.js 的电子生成器。无法加载预加载脚本

Posted 2023-03-22

【中文标题】带有 browserWindow 和 preload.js 的电子生成器。无法加载预加载脚本

【英文标题】：electron-builder with browserWindow and preload.js. Unable to load preload script

【发布时间】：2020-07-03 23:13:21

【问题描述】：

我的 main.js 中的 electron-builder 和 browserWindows 预加载选项有问题：

// Create the browser window.
  mainWindow = new BrowserWindow(
    x: mainWindowState.x,
    y: mainWindowState.y,
    width: mainWindowState.width,
    height: mainWindowState.height,
    minHeight: 500,
    minWidth: 1000,
    icon: path.join(__dirname, 'icon.ico'),
    frame: false,
    webPreferences: 
      preload: path.resolve(__dirname, 'preload.js'), // <--- PROBLEM
      nativeWindowOpen: true,
      spellcheck: true,
      nodeIntegration: false
    
  );

启动打包的应用程序后，我收到以下错误：

无法加载预加载脚本：C:\Users[...]\resources\app.asar\preload.js

preload.js 与 main.js 位于同一目录中。

有解决这个问题的想法吗？

诚挚的问候， 凯W.

【问题讨论】：

请告诉我你的项目结构。而你electron-builderconfiguration

对于任何来到这里并遇到 unpackaged 应用程序问题的人，然后我发现问题是 preload.js 内部出现错误，出现下Unable to load preload script

【参考方案1】：

webPreferences: 
                    frame: false,
                    nodeIntegration: true,
                    enableRemoteModule: true, //this must be true
                    preload: path.resolve(root, 'bridge', 'initialize.js'), 
                

无法加载预加载脚本，但实际上 initialize.js 有问题。在我的文件中，有一个错误，remote.getGlobal 未定义，因为这个 webPreferences.enableRemoteModule 在 10.x 版本的默认值是 false，所以你必须将它设置为 true。那么它会很好用。

【讨论】：

为什么要在启用 nodeIntegration 和 remoteModule 的情况下预加载？通常，当您预加载时，它们会被禁用——这就是预加载的重点。

我的预加载脚本本身也有一个错误。

【参考方案2】：

"extraResources": [
  "src/main/preload.js",
  "src/electron-actions/*,"
]

在我的情况下成功了！

【讨论】：

不幸的是，您不能在“文件”和“extraResources”中都包含通用的index.js 文件（添加到第二组，将其从第一组中删除）。因此，这对我来说不起作用，因为我的预加载文件与我的主要 index.js 文件相同。 （它动态检查是作为主索引文件运行还是作为预加载运行）

这对我不起作用。即使脚本现在存在于该目录中，我仍然收到错误 Unable to load preload script: "C:\Users\...\resources\preload.js"！

【参考方案3】：

今天我从 electron 9.x 迁移到 13.1.9。这些解决方案对我没有帮助。我的愿望：

预加载文件路径：./src/public/preload.js background.js

  win = new BrowserWindow(
    width: 800,
    height: 600,
    minHeight: 300,
    minWidth: 500,
    webPreferences: 
      preload: path.join(__static, 'preload.js'), // <- static
    ,
  );

---

它是如何工作的？

./src/public 中的所有文件都只是复制到构建文件夹中。但是在electron:serve 和electron:build 之后 - 构建文件夹具有不同的结构。而你（或者只是我的情况）不能使用__dirname。所以需要使用__static

附：关于__static：https://webpack.electron.build/using-static-assets

附： electron的另一个例子__static：

protocol.registerSchemesAsPrivileged([
  scheme: 'app',
  privileges: 
    secure: true,
    standard: true,
    icon: path.join(__static, 'icon.png'), // <- this
  ,
]);

他们帮我找到了解决方案（使用公用文件夹）：https://mmazzarolo.medium.com/building-a-desktop-application-using-electron-and-create-react-app-2b6d127f4fd7

【参考方案4】：

在files 配置中添加preload.js 文件，如下所示：

 "build": 
    "files": [
      "./src/preload.js"
    ]

【参考方案5】：

抱歉回复晚了。 对我来说，有效的是：

preload.js 位置

static
  |- preload.js

main/index.js

win = new BrowserWindow(
  width: 800,
  height: 600,
  minHeight: 300,
  minWidth: 500,
  webPreferences: 
    preload: path.resolve(getElectronApp().getAppPath(), 'preload.js'),
  ,
);

还有 package.json (electron-webpack)

"electronWebpack": 
  "main": 
    "extraEntries": [
      "./static/preload.js"
    ],
  ,

【参考方案6】：

  webPreferences: 
    webSecurity: false,
    enableRemoteModule: true,
    nodeIntegration: true,
    contextIsolation: false,  // <== important
    preload: path.join(__dirname, 'src/preload.js')
  

https://github.com/electron/electron/pull/15738

【讨论】：

查看链接，contextIsolation 字段的官方默认值已更改，如果该字段为 true，则将禁用不安全代码插入