Electron: No se pudo cargar el recurso: net :: ERR_FILE_NOT_FOUND file: /// D: /css/app.css

Creado en 25 may. 2015 · 26Comentarios · Fuente: electron/electron

Tengo tal estructura en la aplicación:
file struct

Escribo en la cabeza mi index.html:

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

ejecutar electron y obtener el error:

capture
No se pudo cargar el recurso: net :: ERR_FILE_NOT_FOUND file: /// D: /css/app.css
Por favor, todos, díganme, ¿cómo debo establecer la ruta al archivo?

Fuente

RinatMullayanov

Comentario más útil

Si esto ocurre cuando tiene <base href="/"> en el index.html, simplemente reemplácelo por <base href="./"> .

Myrga en 31 oct. 2016

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

Todos 26 comentarios

Problema relacionado: # 1747.

lolmaus en 25 may. 2015

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

Pruebe esto como una forma alternativa de solucionar este problema de la ruta:

<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 en 25 may. 2015

👍4 🚀1 ❤1

@shama Gracias por el fragmento.
Me sale un error porque el uso <base href = "/">, sin este error no ocurre.
Trabajo de muestra https://github.com/RinatMullayanov/angular-boilerplate branch electron .

RinatMullayanov en 25 may. 2015

👍25 ❤2

También tengo el mismo problema. Electron intenta cargar recursos desde C: /, las rutas relativas no funcionan.
Establecer la ruta completa no es una opción, los archivos no se cargarán si colocamos la aplicación en otra ruta.

odragora en 20 feb. 2016

Tengo el mismo problema al obtener alguna fuente

He agregado esto a mi CSS
<strong i="7">@import</strong> url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
Incluso he intentado agregar esto a mi html:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

También he probado:

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

pero me sale este error:
Failed to load resource: net::ERR_CONNECTION_REFUSED

BesatZardosht en 13 abr. 2016

❤2

Si esto ocurre cuando tiene <base href="/"> en el index.html, simplemente reemplácelo por <base href="./"> .

Myrga en 31 oct. 2016

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

@Myrga , eres un salvavidas. He estado buscando una respuesta durante 5 días, no había ningún documento sobre esto, hasta que encontré esta publicación anterior. Muchas gracias

guibot17 en 14 nov. 2016

ps: si vino aquí y está usando create-react-app, intente poner "homepage": "./", en su package.json. (Aunque aparentemente esto no es compatible actualmente, por lo que es posible que tenga otros problemas con las fuentes y demás, lo que podría requerir mover esos activos a su carpeta / public)

johnmw en 12 ene. 2017

👍24 ❤16 🚀9 🎉7 😄7

Muchas gracias

breaded en 17 feb. 2017

@BesatZardosht Tiene un error tipográfico en su URL:

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

debiera ser:

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

(tenga en cuenta el : )

anaisbetts en 17 feb. 2017

En caso de que esté aquí con el mismo problema usando Webpack 2.x , React y / o Redux , existe la posibilidad de que esto resuelva su problema:

Busque en el directorio de su proyecto "publicPath" y cambie su valor de / a ./
con todos los diferentes modelos disponibles, esta configuración se puede encontrar en diferentes ubicaciones.En mi caso, usando redux-cli que usa redux-starter-kit , estaba en project.config.js :

publicPath: './',

Además, si está construyendo por Electron es posible que deba agregar / modificar la propiedad Webpack target .
¡¡Manténte feliz!! 😄

mim-Armand en 17 jun. 2017

🎉3

Tenía el mismo problema, la solución de Myrga funcionó. creo debe considerar / como directorio raíz global para la PC cuando se usa el protocolo de archivo. Mientras que "./" funciona como una referencia relativa a la carpeta actual. Solo una suposición, cuando se usa el protocolo http: // en el puerto 4200 (donde sirvo mi aplicación Angular4) todo funciona con "/". Para el protocolo de archivo debe usar "./"

hexthedev en 27 jul. 2017

👍2

Decidí rehacer mi aplicación en React. Una vez que agregué el cargador de archivos a mi proyecto, comencé a tener este problema nuevamente. cambiar la propiedad publicPath en webpack.config.js a una ruta relativa (para mí ./app/ en lugar de / app /) solucionó el problema.

PD: parece que el servidor de desarrollo odia esto. Si realiza este cambio y desea ejecutar un servidor de desarrollo de paquete web, este cambio lo confundirá. Deberá cambiar de un lado a otro a medida que pasa de trabajar directamente en electron y trabajar en el servidor de desarrollo (la razón por la que hago esto es para hacer un trabajo css, encuentro que el servidor de desarrollo es más rápido y más estable)

hexthedev en 4 ago. 2017

Puede guardar el archivo html como "guardar como página web" y luego intentar abrir en Chrome.
Esto funcionó para mí.

emirpoy en 22 ago. 2017

👎14 👀3 😕1

cómo resolver " No se pudo cargar el recurso: net :: ERR_FILE_NOT_FOUND "
cada vez que agrego una imagen usando "CSS" arroja este error. ¿Tienen alguna solución para eso ???
no solo la imagen, sino los archivos como el archivo de fuente, da el mismo error.

Tahawahid en 20 jun. 2018

@Tahawahid @RinatMullayanov
Es porque todos sus archivos se sirven desde el sistema de archivos local en lugar de la ruta relativa de la aplicación.
La solución es interceptar el protocolo de archivo. Haga los siguientes cambios en el archivo 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 en 9 jul. 2018

👍4

rkmyowin en 8 sept. 2018

👎6 👍2

@Tahawahid @RinatMullayanov
Es porque todos sus archivos se sirven desde el sistema de archivos local en lugar de la ruta relativa de la aplicación.
La solución es interceptar el protocolo de archivo. Haga los siguientes cambios en el archivo 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 en 22 abr. 2019

Problema de ruta. El navegador busca su archivo en D: /css/app.css. Esto se debe a que en alguna parte de su código se ha mencionado una ruta incorrecta. Si se le da una ruta como / css / ... esto buscará en D: /

Yuresh en 27 abr. 2019

Esto también funcionó. Gracias al Sr. @itsaakashpatel por la información.

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

Simplemente reemplace htmlRootDir y / o indexFile sus expectativas.
_Pruebas en Linux_

leodutra en 15 jul. 2019

👍1

@Myrga Gracias por salvarme el día. Me encantó tu respuesta :)

zearaez en 16 jul. 2019

@Myrga bueno, probablemente establecerías "homepage": "./" en package.json lugar de codificar estas cosas.

defusioner en 2 sept. 2019

👍4

@Myrga bueno, probablemente establecerías "homepage": "./" en package.json lugar de codificar estas cosas.

Por favor @ defusioner , ¿hay algún documento sobre esto?

leodutra en 2 sept. 2019

@leodutra humm, estoy usando react-cra y son capaces de producir dicha configuración: https://create-react-app.dev/docs/deployment#building -for-relativas-rutas

defusioner en 3 sept. 2019

@ defusioner Hum, eso explica muchas cosas.
Parece que esto no está en el nivel de electrones , es más una página de inicio para aplicaciones de reacción , donde esto reemplazará la raíz predeterminada para cualquier enlace relativo o raíz.

En mi caso, usando un Vue.js dist o un electrón crudo, esto probablemente no funcionará.

Creo que este enfoque de paquete debe tenerse en cuenta ... como algunos electronBasePath en package.json

leodutra en 3 sept. 2019

¡Creo que el win.loadFile('index.html') es una mierda! Después de compilarlo en un archivo EXE usando electron-builder . Siempre mostrará DevTools failed to load SourceMap: Could not load content for file:///C:/User..../resources/app.asar/bootstrap.min.css.map .

Pero el win.loadURL() funciona bien.

Pasé 8 horas para descubrir que este es un error que no puedo resolver.

Entonces me di cuenta de que este error no es importante, porque el archivo de mapa es realmente importado.

Para mí, el error real fue causado por alert() : https://stackoverflow.com/questions/56805920/cant-edit-input-text-field-after-window-alert