Utworzono projekt vue webpack przy użyciu vue-cli.Jak poprawnie ustawić favicon.ico na projekcie vue.js?
vue init webpack myproject
A potem prowadził projekt pod dev trybie:
npm run dev
Dostałem ten błąd:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico
Więc wewnątrz WebPacka, jak importować favicon.ico prawidłowo?
Zapoznaj się struktura projektu z WebPACK Szablon: https://vuejs-templates.github.io/webpack/structure.html
Należy pamiętać, że istnieje folder statyczne, wraz z node_modules, src itp
Jeśli umieścisz jakiś obraz do folderu static, jak favicon.png, zostanie udostępniony pod http://localhost:8080/static/favicon.png
Oto dokumentacja dla zasobów statycznych: https://vuejs-templates.github.io/webpack/static.html
Dla problemu favicon można umieścić favicon.ico lub favicon.png do folderu static i odnoszą w <head> swojej index.html następująco:
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
Jeśli nie definiują favicon.ico w swojej index.html, wtedy przeglądarka poprosi o favicon z katalogu głównego strony (domyślne zachowanie). Jeśli określisz favicon jak wyżej, nie zobaczysz już tego 404. Favicon pojawi się również w zakładkach przeglądarki.
Na marginesie, tutaj jest powodem, dlaczego wolę PNG zamiast pliku ICO:
favicon.png vs favicon.ico - why should I use PNG instead of ICO?
Czy próbowałeś tylko upuszczenie go w katalogu głównym witryny? :) Lub w publicznym folderze budowania? – Benjamin