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

가장 유용한 댓글

필요하면이 문제가 발생할 경우 <base href="/"> 된 index.html에 불과하여 교체 <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

필요하면이 문제가 발생할 경우 <base href="/"> 된 index.html에 불과하여 교체 <base href="./"> .

Myrga 에 2016년 10월 31일

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

@Myrga 당신은 생명을 구했습니다. 나는이 오래된 게시물을 발견 할 때까지 5 일 동안 답변을 찾고 있었고 이에 대한 문서는 없습니다. 정말 감사합니다

guibot17 에 2016년 11월 14일

ps: 여기 와서 create-react-app을 사용하고 있다면 package.json에 "homepage": "./", 를 넣어보세요. (분명히 이것은 현재 지원되지 않으므로 글꼴 등에 다른 문제가 있을 수 있으므로 해당 자산을 /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"를 검색하고 값을 / 에서 ./
모든 사용 가능한 다른 boilerplates으로이 설정은 내 경우 사용에서, 서로 다른 위치에서 찾을 수있다 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 dev 서버를 실행하려는 경우 이 변경으로 인해 혼동될 것입니다. 전자에서 직접 작업하고 dev 서버에서 작업할 때 앞뒤로 전환해야 합니다.

hexthedev 에 2017년 08월 04일

html 파일을 "웹 페이지로 저장"으로 저장한 다음 크롬에서 열어볼 수 있습니다.
이것은 나를 위해 일했습니다.

emirpoy 에 2017년 08월 22일

👎14 👀3 😕1

" 자원을 로드하지 못했습니다: net::ERR_FILE_NOT_FOUND "를 해결하는 방법
"CSS"를 사용하여 이미지를 추가할 때마다 이 오류가 발생합니다. 혹시 해결 방법 있으신가요???
이미지뿐만 아니라 글꼴 파일과 같은 파일에서도 동일한 오류가 발생합니다.

Tahawahid 에 2018년 06월 20일

@sunsun_sssssss @sssssssssss
모든 파일이 상대 앱 경로가 아닌 로컬 파일 시스템에서 제공되기 때문입니다.
해결책은 파일 프로토콜을 가로채는 것입니다. main.js 파일에서 다음 변경을 수행하십시오.

메인.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

@sunsun_sssssss @sssssssssss
모든 파일이 상대 앱 경로가 아닌 로컬 파일 시스템에서 제공되기 때문입니다.
해결책은 파일 프로토콜을 가로채는 것입니다. main.js 파일에서 다음 변경을 수행하십시오.
메인.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 글쎄, 이러한 것들을 하드 코딩하는 대신 "homepage": "./" package.json 설정했을 것입니다.

defusioner 에 2019년 09월 02일

👍4

@Myrga 글쎄, 이러한 것들을 하드 코딩하는 대신 "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 또는 raw electron을 사용하면 아마도 작동하지 않을 것입니다.

나는이 패키지 접근 방식을 고려해야한다고 생각합니다 ... 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://stackoverflow.com/questions/56805920/cant-edit-input-text-field-after-window-alert

yingshaoxo 에 2020년 06월 07일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급