Как установить favicon.ico правильно на vue.проект на JS, webpack?

Я создал vue webpack проект с помощью vue-cli.

vue init webpack myproject

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

npm run dev

я получил эту ошибку:

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

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

1 61
html webpack vue.js ecmascript-6 favicon

1 ответ:

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

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

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

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

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

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

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

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

фавикон.ПНГ против фавикон.ico-почему я должен использовать PNG вместо ICO?

99