web-dev-qa-db-fra.com

Comment paramétrer favicon.ico correctement sur le projet webpack vue.js?

J'ai créé un projet vue webpack en utilisant vue-cli.

vue init webpack myproject

Et puis couru le projet en mode dev:

npm run dev

J'ai eu cette erreur:

Echec du chargement de la ressource: le serveur a répondu avec un statut 404 (introuvable) http: // localhost: 8080/favicon.ico

Dans Webpack, comment importer correctement le favicon.ico?

htmlecmascript-6webpackvue.jsfavicon
81
Alfred Huang

Consultez la structure de projet du modèle Webpack: https://vuejs-templates.github.io/webpack/structure.html

Notez qu'il existe un dossier statique, avec node_modules, src, etc.

Si vous placez 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 problème de favicon, vous pouvez placer un favicon.ico ou favicon.png dans le dossier static et vous reporter dans le <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 de favicon.ico dans votre index.html, le navigateur demandera un favicon à la racine du site Web (comportement par défaut). Si vous spécifiez un favicon comme ci-dessus, vous ne verrez plus ce 404. La favicon commencera également à apparaître dans les onglets de votre navigateur.

En passant, voici la raison pour laquelle je préfère le format PNG au lieu du fichier ICO:

favicon.png vs favicon.ico - pourquoi devrais-je utiliser le format PNG au lieu de ICO?

130
Mani