Comment mettre favicon.ico correctement sur vue.js webpack projet?
j'ai créé un vue webpack projet en utilisant vue-cli .
vue init webpack myproject
et a ensuite dirigé le projet sous dev mode:
npm run dev
j'ai eu cette erreur:
N'a pas réussi à charger la ressource: le serveur a répondu avec un statut de 404 (non trouvé) http://localhost:8080/favicon.ico
alors dans webpack, comment importer le favicon.ico correctement?
1 réponses
consultez la Structure de projet du modèle webpack: https://vuejs-templates.github.io/webpack/structure.html
notez qu'il y a un dossier statique, avec node_modules , src , etc.
si vous mettez une image dans le dossier static , comme favicon.png , elle sera disponible à http://localhost:8080/static/favicon.png
Voici la documentation pour les actifs statiques: https://vuejs-templates.github.io/webpack/static.html
pour votre numéro favicon, vous pouvez mettre un favicon.ico ou favicon.png dans le dossier static et vous référer au <head> de votre index.html comme suit:
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>
<title>My Vue.js app</title>
...
</head>
si vous ne définissez pas un favicon.ico dans votre index.html , alors le navigateur demandera un favicon à partir de la racine du site web (par défaut comportement.) Si vous spécifiez un favicon comme ci-dessus, vous ne verrez plus ce 404. Le favicon apparaîtra également dans les onglets de votre navigateur.
comme note secondaire, voici la raison pour laquelle je préfère PNG au lieu du fichier ICO:
favicon.png vs favicon.ico-pourquoi utiliser PNG au lieu D'ICO?