Как правильно установить favicon.ico в проекте веб-пакета vue.js?

94

Я создал vue webpackпроект, используя vue-cli.

vue init webpack myproject

А затем запустил проект в devрежиме:

npm run dev

У меня такая ошибка:

Не удалось загрузить ресурс: сервер ответил статусом 404 (не найден) http: // localhost: 8080 / favicon.ico

Итак, как правильно импортировать внутри webpack favicon.ico?

html ecmascript-6 webpack vue.js favicon Альфред Хуанг
источник
1
Вы пробовали просто закинуть в корень сайта? :) Или в папке public build?
Бенджамин

Ответы:

154

Ознакомьтесь со структурой проекта шаблона веб-пакета: https://vuejs-templates.github.io/webpack/structure.html

Обратите внимание, что есть статическая папка, а также node_modules, srcи т. Д.

Если вы поместите какое-то изображение в staticпапку, например favicon.png, оно будет доступно по адресу http: // localhost: 8080 / static / favicon.png

Вот документация для статических ресурсов: https://vuejs-templates.github.io/webpack/static.html

Если у вас возникла проблема с иконкой, вы можете поместить favicon.icoили favicon.pngв staticпапку и сослаться на <head>ваш index.html следующим образом:

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

Если вы не укажете a favicon.icoв своем index.html, браузер запросит значок значка из корня веб-сайта (поведение по умолчанию). Если вы укажете значок, как указано выше, вы больше не увидите 404. Значок также начнет отображаться на вкладках вашего браузера.

В качестве примечания, вот причина, по которой я предпочитаю PNG вместо файла ICO:

favicon.png vs favicon.ico - почему я должен использовать PNG вместо ICO?

Мани
источник
1
что, если я хочу сохранить свой значок в src / assets? лучше всего оставить его в статической папке вместе с .gitkeep?
Акин Хван
4
@AkinHwan Я еще не пробовал это сделать, но если вы сохраните какое-либо изображение в src / assets, оно будет рассматриваться как зависимость модуля и войдет в окончательный файл сборки как встроенный образ (формат base64). Это излишне увеличит размер сборки. Ничего страшного, это никак не повлияет на производительность. Я предпочитаю сохранять изображения как «настоящие статические ресурсы», как описано в документации . Ваши предпочтения могут отличаться. Вам нужно попробовать оба метода и выбрать тот, который вам подходит.
Mani
8
Этот ответ кажется немного устаревшим. В текущем шаблоне vue webpack есть общедоступный каталог, а не статический .
JakeParis
@JakeParis также, использование "ярлыка" в ссылке rel используется только для Internet Explorer.
Кейн Нильсен,
4

Небольшое обновление для Laravel 5.x, поместите свой favicon.icoили favicon.pngв /publicпапку и обратитесь к нему index.htmlследующим образом:

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
    <title>My Vue.js app</title>
    ...
</head>

Надеюсь, это поможет !

восьмой мяч
источник
4

По какой-то причине вышеупомянутые решения не сработали для меня до преобразования favicon.icoфайла по умолчанию favicon.pngи переименования его, favicon-xyz.pngнапример, (я поместил этот файл в /publicпапку) и отредактировал index.htmlфайл следующим образом:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="<%= BASE_URL %>favicon-xyz.png">
    .
    .
    .
</head>

Может быть кому-то полезно.

тюркан
источник