Question

当我通过Visual Studio Code运行我的Electron应用程序时，主进程会加载，进而启动index.html页面。在index.js脚本中，我将浏览器窗口重定向到名为startup.html的本地html文件，该文件位于我的脚本文件夹中，该文件夹只是应用程序的子文件夹。 index.html页面甚至没有启动，应用程序生成错误消息：

Not allowed to load local resource

在DevTools控制台中，它还会显示它正在尝试加载的资源：

file:///usr/local/lib/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/scripts/ui/startup/startup.html

如果我跑步＆＃34; npm start＆＃34;从我项目的根文件夹中，应用程序正确启动，并且index.html和startup.html页面都已加载。

Visual Studio Code启动电子：

/usr/local/bin/electron

这似乎与仅使用＆＃34; npm start＆＃34;启动它不同。不确定区别是什么。

附注：在我添加代码以启动startup.html之前，应用程序将从Visual Studio Code运行。只有在添加startup.html之后，它才会起作用。

导致这种情况的原因是什么？

Answer 1

我有一个小型的电子应用程序，它从/ app子文件夹中加载main.js和main.htm。

main.js加载正常，应用程序创建一个窗口：让mainWindow = null

code

然后，我添加了代码以加载也位于/ app子文件夹中的main.htm文件。

app.on('ready', () => {
    console.log('Hello from Electron');
    mainWindow = new BrowserWindow();
})

但是，我在（chrome）控制台中遇到以下错误：

错误说，

“不允许加载本地资源：”

那是一条红鲱鱼。该错误应显示“ 找不到本地资源”。

如果我扩展路径，我最终会看到它正在尝试从项目的根目录中加载main.htm文件-即使main.js从/ app子文件夹（这是主文件夹所在的位置）运行。 htm文件已找到）。

要解决此问题，我只需要将子文件夹添加到已修复的路径中即可：

mainWindow.webContents.loadFile("main.htm")

最有可能发生此错误，是因为您的文件路径不正确，而不是因为用户权限或其他原因。

如果添加此行代码，您将看到它认为cwd的路径（当前工作目录：

mainWindow.webContents.loadFile("app/main.htm")

Answer 2

显然，在更新版本的Electron中出现了与VS Code配置设置有关的更改。有关如何配置VS代码的文档已在以下位置更新：

https://electronjs.org/docs/tutorial/debugging-main-process-vscode

Answer 3

因此，如果我们尝试在不完全加载页面的情况下操纵页面的内容，则可能会发生此问题。因此，必须在优雅地加载页面后（在显示事件之后）进行任何操作。

在加载文件之前，我也遇到了同样的问题。

window.webContents.openDevTools()

示例代码

// Issue code
window =  new BrowserWindow({width:800,height:600,parent:mainWindow})
window.webContents.openDevTools()
window.loadURL(url.format({
    pathname: path.join(__dirname,'/../views/file.html'),
    protocol: 'file',
    slashes: true
}))

// Issue Solved code 
window =  new BrowserWindow({width:800,height:600,parent:mainWindow})

window.loadURL(url.format({
    pathname: path.join(__dirname,'/../views/file.html'),
    protocol: 'file',
    slashes: true
}))
window.webContents.openDevTools()

Answer 4

这是我在Linux环境和Windows环境中解决此问题的方式

newWindow.loadFile(`${__dirname}/index.html`);  //note Linux environment 


newWindow.loadFile(`file://${__dirname}/index.html`) //windows environment

对我来说，我的文件夹结构是

|__app
| |__main.js
| |__renderer.js
| |__index.html
|__package.json

您还可以使用console.log(__dirname)在控制台/终端上查看目录

不允许加载本地资源 - 电子

4 个答案: