Как установить 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 ответ:
Проверьте структуру проекта шаблона 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?