Electron: Не удалось загрузить ресурс: net :: ERR_FILE_NOT_FOUND файл: /// D: /css/app.css

Созданный на 25 мая 2015 · 26Комментарии · Источник: electron/electron

У меня в приложении такая структура:
file struct

Пишу в голове свой index.html:

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

запустите электрон и получите ошибку:

capture
Не удалось загрузить ресурс: net :: ERR_FILE_NOT_FOUND файл: /// D: /css/app.css
Пожалуйста, подскажите, как мне указать путь к файлу?

Источник

RinatMullayanov

Самый полезный комментарий

Если это происходит при наличии <base href="/"> в index.html, просто замените его на <base href="./"> .

Myrga 31 окт. 2016

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

Все 26 Комментарий

Связанный выпуск: # 1747.

lolmaus 25 мая 2015

👎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 25 мая 2015

👍4 🚀1 ❤1

@shama Спасибо за фрагмент.
Я получаю сообщение об ошибке, потому что использование <base href = "/"> без этой ошибки не возникает.
Пример работы https://github.com/RinatMullayanov/angular-boilerplate branch electronics .

RinatMullayanov 25 мая 2015

👍25 ❤2

Есть такая же проблема. Электрон пытается загрузить ресурсы из C: /, относительные пути не работают.
Установка полного пути невозможна, файлы не будут загружаться, если мы разместим приложение по другому пути.

odragora 20 февр. 2016

У меня такая же проблема с получением шрифта

Я добавил это в свой 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 13 апр. 2016

❤2

Если это происходит при наличии <base href="/"> в index.html, просто замените его на <base href="./"> .

Myrga 31 окт. 2016

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

@Myrga , ты спасаешь жизнь. Я искал ответ уже 5 дней, никаких документов по этому поводу, пока не наткнулся на этот старый пост. Большое спасибо

guibot17 14 нояб. 2016

ps: если вы пришли сюда и используете приложение create-response-app, попробуйте поместить "homepage": "./", в свой package.json. (Хотя, по-видимому, в настоящее время это не поддерживается, поэтому у вас могут быть другие проблемы со шрифтами и т. Д., Что может потребовать перемещения этих ресурсов в вашу / общую папку)

johnmw 12 янв. 2017

👍24 ❤16 🚀9 🎉7 😄7

Спасибо большое

breaded 17 февр. 2017

@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 17 февр. 2017

Если вы столкнулись с той же проблемой, используя Webpack 2.x , React и / или Redux , есть шанс, что это решит вашу проблему:

Найдите в каталоге проекта "publicPath" и измените его значение с / на ./
со всеми различными доступными шаблонами этот параметр может быть найден в разных местах. В моем случае с использованием redux-cli который использует redux-starter-kit , он был в project.config.js :

publicPath: './',

Также, если вы строите для Electron вам может потребоваться добавить / изменить свойство Webpack target .
Оставайся счастливым !! 😄

mim-Armand 17 июн. 2017

🎉3

Была такая же проблема, решение Myrga сработало. думаю должен рассматривать / как глобальный корневой каталог для ПК при использовании файлового протокола. В то время как "./" работает как относительная ссылка на текущую папку. Только предположение, при использовании протокола http: // на порту 4200 (где я обслуживаю свое приложение Angular4) все работает с «/». Для файлового протокола необходимо использовать "./"

hexthedev 27 июл. 2017

👍2

Решил переделать свое приложение в React. Как только я добавил в свой проект загрузчик файлов, у меня снова возникла эта проблема. изменение свойства publicPath в webpack.config.js на относительный путь (для меня ./app/, а не / app /) устранило проблему.

PS кажется, что dev-сервер ненавидит это. Если вы внесете это изменение и захотите запустить сервер разработки веб-пакетов, это изменение запутает его. Вам нужно будет переключаться взад и вперед, когда вы переходите от работы непосредственно в электроне к работе на сервере разработки (причина, по которой я делаю это, - это работа с css, я считаю, что сервер разработки быстрее и стабильнее)

hexthedev 4 авг. 2017

Вы можете сохранить html-файл как «сохранить как веб-страницу», а затем попытаться открыть в Chrome.
Это сработало для меня.

emirpoy 22 авг. 2017

👎14 👀3 😕1

как решить " Не удалось загрузить ресурс: net :: ERR_FILE_NOT_FOUND "
всякий раз, когда я добавляю изображение с помощью «CSS», возникает эта
не только изображение, но и файлы, такие как файл шрифта, он дает ту же ошибку.

Tahawahid 20 июн. 2018

@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 9 июл. 2018

👍4

rkmyowin 8 сент. 2018

👎6 👍2

@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 22 апр. 2019

Проблема пути. Браузер ищет ваш файл в D: /css/app.css. Это потому, что где-то в вашем коде указан неправильный путь. Если вам указан путь типа / css / ... поиск будет выполняться в D: /

Yuresh 27 апр. 2019

Это тоже помогло. Спасибо господину @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 15 июл. 2019

👍1

@Myrga Спасибо, что спасли меня. Очень понравился твой ответ :)

zearaez 16 июл. 2019

@Myrga ну, вы бы, вероятно, установили "homepage": "./" в package.json вместо того, чтобы жестко кодировать эти вещи.

defusioner 2 сент. 2019

👍4

@Myrga ну, вы бы, вероятно, установили "homepage": "./" в package.json вместо того, чтобы жестко кодировать эти вещи.

Пожалуйста, @defusioner , есть ли по этому

leodutra 2 сент. 2019

@leodutra humm, я использую https://create-react-app.dev/docs/deployment#building -for-relative-paths

defusioner 3 сент. 2019

@defusioner Хм, это многое объясняет.
Похоже, это не на электронном уровне, это скорее домашняя страница для реагирующих приложений, где это заменит корень по умолчанию для любой относительной или корневой ссылки.

В моем случае, используя Vue.js dist или необработанный электрон, это, вероятно, не сработает.

Я думаю, что этот пакетный подход следует принять во внимание ... как какой-то electronBasePath в package.json

leodutra 3 сент. 2019

Я думаю, что win.loadFile('index.html') - это дерьмо! После компиляции в EXE-файл с помощью electron-builder . Всегда будет отображаться 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