electron 电子：无法加载预加载脚本：Resources/app.asar/src/preload.js

pdkcd3nj 于 2022-12-16 发布在 Electron

关注(0)|答案(3)|浏览(520)

我有一个电子应用程序，它在开发中构建和运行，但是当用electron-builder打包应用程序时，预加载脚本没有打包在正确的位置。
这是一个有据可查的问题，例如，有非常相似的问题here和here，但没有一个答复或解决方案在我的情况下起作用。
从我的electron.js文件：

function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(app.getAppPath(), 'src/preload.js'),
            contextIsolation: true,
        },
    });

    // In production, set the initial browser path to the local bundle generated
    // by the Create React App build process.
    // In development, set it to localhost to allow live/hot-reloading.
    const appURL = app.isPackaged
        ? url.format({
            pathname: path.join(__dirname, 'index.html'),
            protocol: 'file:',
            slashes: true,
        })
        : 'http://localhost:3000';
    mainWindow.loadURL(appURL);

    mainWindow.webContents.openDevTools();
}

我的预加载脚本：

const { contextBridge, shell } = require('electron')

contextBridge.exposeInMainWorld(
    'electron',
    {
        openBrowserWindow: (url) => shell.openExternal(url)
    }
)

还有我的电子应用程序包.json：

"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": [
            "**",
            "../app/src/*",
            "src/preload.js"
        ],
        "extraResources": [
            "../app/src/*",
            "src/preload.js"
        ],
        "extraFiles": [
            "../app/src/*",
            "src/preload.js"
        ]
    }

上面我已经尝试确保“src/preload.js”文件以不同的方式复制，但我仍然得到错误：
无法加载预加载脚本：...app/Contents/Resources/app.asar/src/preload.js
错误：无法找到模块“004.000.000”
预加载脚本实际上是复制过来的，但它不是app.asar文件的一部分。它被复制到包含app.asar文件的Resources文件夹之外的src文件夹中：

我如何正确地配置electron-builder，使这个文件在正确的位置，并可以在包运行时访问？

electron

来源：https://stackoverflow.com/questions/70175316/electron-unable-to-load-preload-script-resources-app-asar-src-preload-js

3条答案

按热度按时间

kyks70gy1#

如果您这样做：

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        preload: path.resolve(app.getAppPath(), 'preload.js'),
        contextIsolation: true,
    },
});

它工作吗？（为我工作的电子webpack和电子建设者）

赞(0）回复(0）举报 2022-12-16

esyap4oy2#

preload: path.join(app.getAppPath(), 'src/preload.js'),

由于您没有将preload.js打包到应用程序包文件（asar默认值）中，因此不会像这样工作。app.getAppPath()将指示应用程序包文件（或目录，如果您将asar设置为false）
您的代码指示/xxx.app/Contents/Resources/app.asar/src/preload.js或/xxx.app/Contents/Resources/app/src/preload.js您的预加载脚本文件不存在，但在第二个父目录中。
这是你的正确路径

path.join(app.getAppPath(), '..', '..', 'src', 'preload.js');

赞(0）回复(0）举报 2022-12-16

kzipqqlq3#

首先，添加用于测试的控制台日志。

console.log({dirname: __dirname})
console.log({getAppPath: app.getAppPath()})
console.log({resourcesPath: process.resourcesPath})

const mainWindow = new BrowserWindow({ ... })

字符串
其次，必须添加contextIsolation: true。
如果您使用的是electron-builder，但由于某种原因无法添加contextIsolation: true，则可以使用以下解决方法：
package.json

"build": {
    ...
    "extraResources": [
      ...
      "app/preload.js" // <---- add your path
    ],
  }

electron.js

const preloadPath =
      process.env.NODE_ENV === 'development'
        ? path.join(__dirname, '../preload.js') // <---- add your path
        : path.join(process.resourcesPath, '/app/preload.js'); // <---- add your path

const mainWindow = new BrowserWindow({
      ...
      webPreferences: {
        contextIsolation: false,
        preload: preloadPath,
        ...
      }
})

什么是path.join(process.resourcesPath, '/app/preload.js')？
构建应用程序后，您可以在此处找到额外资源
C:\Users\<user>\AppData\Local\Programs\<app>\resources-用于Windows。
对于MacOS，您可以在应用上选择right click，然后单击Show Package Contents〉Resources

赞(0）回复(0）举报 2022-12-16

我来回答

electron 电子：无法加载预加载脚本：Resources/app.asar/src/preload.js

3条答案

相关问题

热门标签

最新问答