Electron:无法加载预加载脚本:Resources/app.asar/src/preload.js

Posted

技术标签:

【中文标题】Electron:无法加载预加载脚本:Resources/app.asar/src/preload.js【英文标题】:Electron: Unable to load preload script: Resources/app.asar/src/preload.js 【发布时间】:2022-01-07 12:28:39 【问题描述】:

我有一个在开发中构建和运行的电子应用程序,但是使用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)
    
)

还有我的 Electron 应用 package.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

错误:找不到模块'...app/Contents/Resources/app.asar/src/preload.js'

预加载脚本实际上是复制过来的,但它不是 app.asar 文件的一部分。它被复制到包含 app.asar 文件的 Resources 文件夹之外的 src 文件夹中:

如何正确配置 electron-builder 以使该文件位于正确的位置并且可以在包运行时访问?

【问题讨论】:

【参考方案1】:

如果你这样做:

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

它有效吗? (使用电子网络包和电子生成器为我工作)

【讨论】:

【参考方案2】:
        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');

【讨论】:

以上是关于Electron:无法加载预加载脚本:Resources/app.asar/src/preload.js的主要内容,如果未能解决你的问题,请参考以下文章

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

electron - node.js - ng : 无法加载文件路径\ng.ps1,因为在此系统上禁用了运行脚本

原创从零开始搭建Electron+Vue+Webpack项目框架预加载和Electron自动更新

Electron(基于Vue)中使用IPC

Electron(基于Vue)中使用IPC

在Electron的预装脚本中使用typescript