Electron: Falha ao carregar o recurso: net :: ERR_FILE_NOT_FOUND file: /// D: /css/app.css

Criado em 25 mai. 2015 · 26Comentários · Fonte: electron/electron

Eu tenho essa estrutura no aplicativo:
file struct

Eu escrevo na cabeça meu index.html:

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

execute o elétron e obtenha o erro:

capture
Falha ao carregar o recurso: net :: ERR_FILE_NOT_FOUND file: /// D: /css/app.css
Por favor, todos, me digam, como devo definir o caminho para o arquivo?

Fonte

RinatMullayanov

Comentários muito úteis

Se isso ocorrer ao ter <base href="/"> no index.html, basta substituí-lo por <base href="./"> .

Myrga em 31 out. 2016

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

Todos 26 comentários

Assunto relacionado: # 1747.

lolmaus em 25 mai. 2015

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

Tente isso como uma maneira alternativa de contornar esse problema de caminho:

<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 em 25 mai. 2015

👍4 🚀1 ❤1

@shama Obrigado pelo snippet.
Recebo um erro porque o uso <base href = "/">, sem este erro não ocorre.
Exemplo de trabalho https://github.com/RinatMullayanov/angular-boilerplate branch elétron .

RinatMullayanov em 25 mai. 2015

👍25 ❤2

Têm o mesmo problema também. Electron tenta carregar recursos de C: /, caminhos relativos não funcionam.
Definir o caminho completo não é uma opção, os arquivos não serão carregados se colocarmos o aplicativo em outro caminho.

odragora em 20 fev. 2016

Eu tenho o mesmo problema para obter alguma fonte

Eu adicionei isso ao meu CSS
<strong i="7">@import</strong> url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
Eu até tentei adicionar isto ao meu html:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

Eu também tentei:

<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" />

mas recebo este erro:
Failed to load resource: net::ERR_CONNECTION_REFUSED

BesatZardosht em 13 abr. 2016

❤2

Se isso ocorrer ao ter <base href="/"> no index.html, basta substituí-lo por <base href="./"> .

Myrga em 31 out. 2016

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

@Myrga, você salva uma vida. Estou procurando uma resposta há 5 dias, nenhum doc sobre isso, até que me deparei com este post antigo. Muito obrigado

guibot17 em 14 nov. 2016

ps: se você veio aqui e está usando o create-react-app, tente colocar "homepage": "./", em seu package.json. (Embora aparentemente isso não seja compatível no momento, você pode ter outros problemas com fontes e outros, o que pode exigir a movimentação desses recursos para sua pasta / public)

johnmw em 12 jan. 2017

👍24 ❤16 🚀9 🎉7 😄7

muito obrigado

breaded em 17 fev. 2017

@BesatZardosht Ocorreu um erro de digitação em seu URL:

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

deveria estar:

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

(observe o : )

anaisbetts em 17 fev. 2017

Caso você esteja aqui com o mesmo problema usando Webpack 2.x , React e / ou Redux , há uma chance de que isso resolva o seu problema:

Pesquise no diretório do seu projeto por "publicPath" e altere seu valor de / para ./
com todos os diferentes padrões disponíveis, esta configuração pode ser encontrada em locais diferentes. No meu caso, usando redux-cli que usa redux-starter-kit , estava em project.config.js :

publicPath: './',

Além disso, se você estiver construindo para Electron pode ser necessário adicionar / modificar a propriedade Webpack target .
Fique feliz!! 😄

mim-Armand em 17 jun. 2017

🎉3

Tive o mesmo problema, a solução de Myrga funcionou. eu penso deve considerar / como diretório raiz global para o PC ao usar o protocolo de arquivo. Enquanto "./" funciona como uma referência relativa à pasta atual. Apenas um palpite, ao usar o protocolo http: // na porta 4200 (onde eu atendo meu aplicativo Angular4), tudo funciona com "/". Para protocolo de arquivo tem que usar "./"

hexthedev em 27 jul. 2017

👍2

Decidi refazer meu aplicativo no React. Depois de adicionar o carregador de arquivos ao meu projeto, comecei a ter esse problema novamente. alterar a propriedade publicPath em webpack.config.js para um caminho relativo (para mim ./app/ em vez de / app /) corrigiu o problema.

PS parece que o servidor de desenvolvimento odeia isso. Se você fizer essa alteração e quiser executar um servidor de desenvolvimento webpack, essa alteração irá confundi-lo. Você precisará alternar entre trabalhar diretamente no electron e trabalhar no servidor de desenvolvimento (a razão de eu fazer isso é para fazer o trabalho de css, acho o servidor de desenvolvimento mais rápido e estável)

hexthedev em 4 ago. 2017

Você pode salvar o arquivo html como "salvar como página da web" e tentar abri-lo no Chrome.
Isso funcionou para mim.

emirpoy em 22 ago. 2017

👎14 👀3 😕1

como resolver " Falha ao carregar o recurso: net :: ERR_FILE_NOT_FOUND "
sempre que adiciono uma imagem usando "CSS", esse erro é gerado
não só a imagem, mas os arquivos como arquivo de fonte, dá o mesmo erro.

Tahawahid em 20 jun. 2018

@Tahawahid @RinatMullayanov
É porque todos os seus arquivos estão sendo servidos a partir do sistema de arquivos local, em vez do caminho relativo do aplicativo.
A solução é interceptar o protocolo do arquivo. Faça as seguintes alterações no arquivo 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 em 9 jul. 2018

👍4

uma

rkmyowin em 8 set. 2018

👎6 👍2

@Tahawahid @RinatMullayanov
É porque todos os seus arquivos estão sendo servidos a partir do sistema de arquivos local, em vez do caminho relativo do aplicativo.
A solução é interceptar o protocolo do arquivo. Faça as seguintes alterações no arquivo 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 em 22 abr. 2019

Problema de caminho. Navegador pesquise seu arquivo em D: /css/app.css. Isso porque em algum lugar do seu código, mencionou um caminho errado. Se você receber um caminho como / css / ... isso pesquisará em D: /

Yuresh em 27 abr. 2019

Isso também funcionou. Obrigado pelo Sr. @itsaakashpatel pelo insight.

// ...
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) 
) 
// ...

Basta substituir htmlRootDir e / ou indexFile com suas expectativas.
_Testado em Linux_

leodutra em 15 jul. 2019

👍1

@Myrga Obrigado por salvar meu dia. Adorei sua resposta :)

zearaez em 16 jul. 2019

@Myrga bem, você provavelmente "homepage": "./" em package.json vez de codificar essas coisas.

defusioner em 2 set. 2019

👍4

@Myrga bem, você provavelmente "homepage": "./" em package.json vez de codificar essas coisas.

Por favor, @defusioner , existe algum documento sobre isso?

leodutra em 2 set. 2019

@leodutra humm, estou usando o https://create-react-app.dev/docs/deployment#building -for-relative-path

defusioner em 3 set. 2019

@defusioner Hum, isso explica muita coisa.
Parece que isso não está no nível do elétron , é mais uma página inicial para aplicativos de reação , onde substituirá a raiz padrão para qualquer link relativo ou raiz.

No meu caso, usando um dist Vue.js ou um elétron bruto, isso provavelmente não funcionará.

Acho que essa abordagem de pacote deve ser levada em consideração ... como alguns electronBasePath em package.json

leodutra em 3 set. 2019

Acho que win.loadFile('index.html') é uma merda! Depois de compilá-lo para o arquivo EXE usando electron-builder . Sempre mostrará DevTools failed to load SourceMap: Could not load content for file:///C:/User..../resources/app.asar/bootstrap.min.css.map .

Mas o win.loadURL() funciona bem.

Passei 8 horas para descobrir que esse é um bug que não consigo resolver.

Então percebi que esse bug não é importante, porque o arquivo do mapa é realmente importado.

Para mim, o verdadeiro bug foi causado por alert() : https://stackoverflow.com/questions/56805920/cant-edit-input-text-field-after-window-alert