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

Question 1

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

vue init webpack myproject

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

npm run dev

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

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

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

Question 2

Ознакомьтесь со структурой проекта шаблона веб-пакета: 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?

Question 3

Небольшое обновление для 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>

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

Question 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>

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