Electron: 无法加载资源：net::ERR_FILE_NOT_FOUND file:///D:/css/app.css

创建于 2015-05-25 · 26评论 · 资料来源: electron/electron

我在应用程序中有这样一个结构：
file struct

我在头写我的 index.html：

<link rel="stylesheet" href="css/app.css"/>

运行电子并得到错误：

capture
无法加载资源：net::ERR_FILE_NOT_FOUND file:///D:/css/app.css
请大家告诉我，我应该如何设置文件的路径？

资料来源

RinatMullayanov

最有用的评论

如果在 index.html 中有<base href="/">时发生这种情况，只需将其替换为<base href="./"> 。

Myrga 于 2016-10-31

👍141 ❤56 🎉29 😄22 👎12 👀5 🚀5 😕2

所有26条评论

相关问题：#1747。

lolmaus 于 2015-05-25

👎44 😕4 👀2 😄2 🚀1 ❤1 🎉1 👍1

尝试将此作为解决此路径问题的替代方法：

<html>
  <head>
    <title></title>
  </head>
  <body>
    <script>
    var link = document.createElement('link')
    link.setAttribute('rel', 'stylesheet')
    link.setAttribute('href', require('path').join(__dirname, 'css', 'app.css'))
    document.head.appendChild(link)
    </script>
  </body>
</html>

shama 于 2015-05-25

👍4 🚀1 ❤1

@shama感谢您的片段。
我得到一个错误，因为使用 <base href="/">，没有这个错误就不会发生。
示例工作https://github.com/RinatMullayanov/angular-boilerplate分支电子。

RinatMullayanov 于 2015-05-25

👍25 ❤2

也有同样的问题。 Electron 尝试从 C:/ 加载资源，相对路径不起作用。
设置完整路径不是一个选项，如果我们将应用程序放在另一个路径上，文件将不会加载。

odragora 于 2016-02-20

我在获取一些字体时遇到了同样的问题

我已将此添加到我的 CSS
<strong i="7">@import</strong> url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
我什至尝试将其添加到我的 html 中：
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

我也试过：

<link rel="stylesheet" type="text/css" href="http//fonts.googleapis.com/css?family=Open+Sans" />

<link rel="stylesheet" type="text/css" href="https//fonts.googleapis.com/css?family=Open+Sans" />

但我收到此错误：
Failed to load resource: net::ERR_CONNECTION_REFUSED

BesatZardosht 于 2016-04-13

❤2

如果在 index.html 中有<base href="/">时发生这种情况，只需将其替换为<base href="./"> 。

Myrga 于 2016-10-31

👍141 ❤56 🎉29 😄22 👎12 👀5 🚀5 😕2

@Myrga你是

guibot17 于 2016-11-14

ps：如果您来到这里并使用 create-react-app，请尝试将"homepage": "./",放入您的 package.json 中。（尽管目前显然不支持此功能，因此您可能会遇到字体等其他问题，这可能需要将这些资产移动到您的 /public 文件夹）

johnmw 于 2017-01-12

👍24 ❤16 🚀9 🎉7 😄7

太感谢了

breaded 于 2017-02-17

@BesatZardosht你的 URL 有错别字：

<link rel="stylesheet" type="text/css" href="https//fonts.googleapis.com/css?family=Open+Sans" />

应该：

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans" />

（注意: ）

anaisbetts 于 2017-02-17

如果您在这里使用Webpack 2.x 、 React和/或Redux遇到同样的问题，这有可能解决您的问题：

在您的项目目录中搜索“publicPath”并将其值从/更改./
对于所有不同的可用样板，可以在不同位置找到此设置，在我使用redux-cli ，它使用redux-starter-kit ，它在project.config.js ：

publicPath: './',

此外，如果您为Electron构建，您可能需要添加/修改 Webpack target属性。
保持愉快！！ 😄

mim-Armand 于 2017-06-17

🎉3

有同样的问题，Myrga 的解决方案奏效了。我认为使用文件协议时必须考虑/作为PC的全局根目录。而“./”作为对当前文件夹的相对引用。只是猜测，当在端口 4200（我为 Angular4 应用程序提供服务的地方）上使用 http:// 协议时，一切都适用于“/”。对于文件协议必须使用“./”

hexthedev 于 2017-07-27

👍2

决定在 React 中重新制作我的应用程序。一旦我将文件加载器添加到我的项目中，我又开始遇到这个问题。将 webpack.config.js 中的 publicPath 属性更改为相对路径（对我来说是 ./app/ 而不是 /app/）修复了这个问题。

PS 似乎开发服务器讨厌这个。如果您进行此更改并希望运行 webpack 开发服务器，则此更改会将其混淆。当你从直接在电子工作和在开发服务器上工作时，你需要来回切换（我这样做的原因是做 css 工作，我发现开发服务器更快更稳定）

hexthedev 于 2017-08-04

您可以将 html 文件另存为“另存为网页”，然后尝试在 chrome 中打开。
这对我有用。

emirpoy 于 2017-08-22

👎14 👀3 😕1

如何解决“加载资源失败：net::ERR_FILE_NOT_FOUND ”
每当我使用“CSS”添加图像时，它都会引发此错误。 各位大侠有什么解决办法？？？
不仅是图像，还有像字体文件这样的文件，它给出了同样的错误。

Tahawahid 于 2018-06-20

@Tahawahid @RinatMullayanov
这是因为您的所有文件都是从本地文件系统而不是相对应用程序路径提供的。
解决办法是拦截文件协议。在 main.js 文件中做以下更改

主程序

mainWindow = new BrowserWindow({width: 1100, height: 700, icon: __dirname + '/icon.ico'}) mainWindow.loadURL(url.format({ pathname:'index.html', protocol: 'file', slashes: true }))

app.on('ready', () => { protocol.interceptFileProtocol('file', (request, callback) => { const url = request.url.substr(7) /* all urls start with 'file://' */ callback({ path: path.normalize( ${__dirname}/${url} )}) }, (err) => { if (err) console.error('Failed to register protocol') }) createWindow() /* callback function */ })

itsaakashpatel 于 2018-07-09

👍4

一种

rkmyowin 于 2018-09-08

👎6 👍2

@Tahawahid @RinatMullayanov
这是因为您的所有文件都是从本地文件系统而不是相对应用程序路径提供的。
解决办法是拦截文件协议。在 main.js 文件中做以下更改
主程序
mainWindow = new BrowserWindow({width: 1100, height: 700, icon: __dirname + '/icon.ico'}) mainWindow.loadURL(url.format({ pathname:'index.html', protocol: 'file', slashes: true }))
app.on('ready', () => { protocol.interceptFileProtocol('file', (request, callback) => { const url = request.url.substr(7) /* all urls start with 'file://' */ callback({ path: path.normalize( ${__dirname}/${url} )}) }, (err) => { if (err) console.error('Failed to register protocol') }) createWindow() /* callback function */ })

？

xiaomizhou66 于 2019-04-22

路径问题。浏览器在 D:/css/app.css 中搜索您的文件。这是因为在您的代码中的某个地方提到了错误的路径。如果你得到一个像 /css/... 这样的路径，这将在 D:/ 中搜索

Yuresh 于 2019-04-27

这也成功了。感谢@itsaakashpatel先生的洞察力。

// ...
const { protocol } = require('electron')
// ... 
// run the next block right before <BrowserWindow>.loadFile()
const htmlRootDir = 'dist/'
const indexFile = 'index.html'

protocol.interceptFileProtocol(
    'file',
    (request, callback) => {
        const url = request.url.substr(7) // strip "file://" out of all urls
        if (request.url.endsWith(indexFile)) {
            callback({ path: url })
        } else {
            callback({ path: path.normalize(`${__dirname}/${htmlRootDir}/${url}`) })
        }
    }, 
    error => console.error(error) 
) 
// ...

只需根据您的期望替换htmlRootDir和/或indexFile 。
_在 Linux 上测试过_

leodutra 于 2019-07-15

👍1

@Myrga感谢您挽救了我的一天。喜欢你的回答:)

zearaez 于 2019-07-16

@Myrga好吧，您可能会在package.json设置"homepage": "./" package.json而不是硬编码这些东西。

defusioner 于 2019-09-02

👍4

@Myrga好吧，您可能会在package.json设置"homepage": "./" package.json而不是硬编码这些东西。

请@defusioner ，有没有关于这个的文档？

leodutra 于 2019-09-02

@leodutra嗯，我正在使用 react-cra，他们能够生成这样的配置： https : //create-react-app.dev/docs/deployment#building -for-relative-paths

defusioner 于 2019-09-03

@defusioner嗯，这解释了很多。
像这样看起来是不是对电子级，这更是一个为反应的应用程序，在那里，这将替代默认的根任何亲属或根的链接网页。

在我的情况下，使用 Vue.js dist 或原始电子，这可能不起作用。

我认为应该考虑这种包方法......就像 package.json 上的一些electronBasePath

leodutra 于 2019-09-03

我认为win.loadFile('index.html')就像一个狗屎！在我们使用electron-builder其编译为 EXE 文件后。它总是显示DevTools failed to load SourceMap: Could not load content for file:///C:/User..../resources/app.asar/bootstrap.min.css.map 。

但是win.loadURL()运行良好。

我花了8个小时才发现这是一个我无法解决的错误。

然后我意识到这个错误并不重要，因为确实导入了地图文件。

对我来说，真正的错误是由alert() ： https :

yingshaoxo 于 2020-06-07

此页面是否有帮助？

0 / 5 - 0 等级