Electron: リソースの読み込みに失敗しました：net :: ERR_FILE_NOT_FOUND file：/// D：/css/app.css
私はアプリケーションにそのような構造を持っています：
私は自分のindex.htmlを頭に書きます：
<link rel="stylesheet" href="css/app.css"/>
電子を実行してエラーを取得します。
リソースの読み込みに失敗しました：net :: ERR_FILE_NOT_FOUND file：/// D：/css/app.css
皆さん、教えてください。ファイルへのパスをどのように設定すればよいですか？
RinatMullayanov
全てのコメント26件
関連する問題：＃1747。
lolmaus
2015年05月25日
このパスの問題を回避する別の方法として、これを試してください。
<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日
@shamaスニペットをありがとう。
<base href = "/">を使用すると、このエラーが発生しないため、エラーが発生します。
サンプル作業https://github.com/RinatMullayanov/angular-boilerplateブランチ電子。
RinatMullayanov
2015年05月25日
同じ問題があります。 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日
持ったときにこれが発生した場合は<base href="/"> index.htmlの中で、ただでそれを置き換える<base href="./"> 。
Myrga
2016年10月31日
@Myrgaあなたは命の
guibot17
2016年11月14日
ps：ここに来てcreate-react-appを使用している場合は、package.jsonに"homepage": "./",を入れてみてください。 （明らかにこれは現在サポートされていないため、フォントなどで他の問題が発生する可能性があり、それらのアセットを/ publicフォルダーに移動する必要がある場合があります）
johnmw
2017年01月12日
どうもありがとうございます
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日
同じ問題がありましたが、Myrgaのソリューションは機能しました。 私が思うに
hexthedev
2017年07月27日
Reactでアプリケーションを作り直すことにしました。 プロジェクトにファイルローダーを追加すると、この問題が再び発生し始めました。 webpack.config.jsのpublicPathプロパティを相対パス（私にとっては/ app /ではなく./app/）に変更すると、問題が修正されました。
PSは開発サーバーがこれを嫌っているようです。 この変更を行い、webpack開発サーバーを実行したい場合、この変更は混乱を招きます。 電子で直接作業することと開発サーバーで作業することから移行するときに、前後に切り替える必要があります（これを行う理由は、css作業を行うためであり、開発サーバーがより高速で安定していることがわかります）
hexthedev
2017年08月04日
HTMLファイルを「Webページとして保存」として保存してから、Chromeで開こうとすることができます。
これは私のために働いた。
emirpoy
2017年08月22日
「リソースのロードに失敗しました：net :: ERR_FILE_NOT_FOUND 」の解決方法
「CSS」を使用して画像を追加すると、このエラーがスローされ
画像だけでなく、フォントファイルなどのファイルでも同じエラーが発生します。
Tahawahid
2018年06月20日
@Tahawahid @RinatMullayanov
これは、すべてのファイルが相対的なアプリパスではなくローカルファイルシステムから提供されているためです。
解決策は、ファイルプロトコルを傍受することです。 main.jsファイルで次の変更を行います
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日
NS
rkmyowin
2018年09月08日
@Tahawahid @RinatMullayanov
これは、すべてのファイルが相対的なアプリパスではなくローカルファイルシステムから提供されているためです。
解決策は、ファイルプロトコルを傍受することです。 main.jsファイルで次の変更を行います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日
@Myrga私の一日を救ってくれてありがとう。 あなたの答えを追加しました:)
zearaez
2019年07月16日
さて、あなたはおそらく設定します@Myrga "homepage": "./"でpackage.jsonの代わりにハードコーディングこれらの事。
defusioner
2019年09月02日
さて、あなたはおそらく設定します@Myrga
"homepage": "./"でpackage.jsonの代わりにハードコーディングこれらの事。
@defusionerをお願いし
leodutra
2019年09月02日
@leodutraうーん、私はreact-craを使用していて、そのような構成を生成できます：
defusioner
2019年09月03日
@defusionerうーん、それは多くのことを説明しています。
これは電子レベルではないようです。これはreactアプリのホームページであり、相対リンクまたはルートリンクのデフォルトのルートに置き換わります。
私の場合、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日
関連する問題
tenry92
·
3コメント
DanielDignam
·
3コメント
EladBezalel
·
3コメント
reggi
·
3コメント
cniaulin
·
3コメント
最も参考になるコメント
持ったときにこれが発生した場合は
<base href="/">index.htmlの中で、ただでそれを置き換える<base href="./">。