Comment définir correctement favicon.ico sur le projet webpack vue.js?

91

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

vue init webpack myproject

Et puis a exécuté le projet en devmode:

npm run dev

J'ai eu cette erreur:

Échec du chargement de la ressource: le serveur a répondu avec un état de 404 (non trouvé) http: // localhost: 8080 / favicon.ico

Alors à l'intérieur de Webpack, comment importer favicon.icocorrectement le?

html ecmascript-6 webpack vue.js favicon Alfred Huang
la source
1
Avez-vous essayé de le déposer à la racine du site? :) Ou dans le dossier de construction public?
Benjamin

Réponses:

150

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

Notez qu'il ya un dossier statique, avec node_modules, srcetc.

Si vous mettez une image dans le staticdossier, par exemple favicon.png, elle sera disponible sur http: // localhost: 8080 / static / favicon.png

Voici la documentation des actifs statiques: https://vuejs-templates.github.io/webpack/static.html

Pour votre problème de favicon, vous pouvez mettre un favicon.icoou favicon.pngdans le staticdossier 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 de favicon.icodans 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. Le favicon commencera également à apparaître dans les onglets de votre navigateur.

En remarque, voici la raison pour laquelle je préfère PNG au fichier ICO:

favicon.png vs favicon.ico - pourquoi devrais-je utiliser PNG au lieu d'ICO?

Mani
la source
1
et si je veux garder mon favicon dans src / assets? est-il préférable de le laisser dans un dossier statique avec .gitkeep?
Akin Hwan
4
@AkinHwan Je n'ai pas encore essayé cela, mais si vous gardez une image dans src / assets, elle sera traitée comme une dépendance de module et ira dans le fichier de construction final comme une image en ligne (format base64). Cela augmentera inutilement la taille de la construction. Rien d'inquiétant, cela n'affectera en aucun cas les performances. Je préfère conserver les images comme de «vrais actifs statiques» comme expliqué dans la documentation . Vos préférences peuvent varier. Vous devez essayer les deux méthodes et choisir celle qui vous convient.
Mani
6
Cette réponse semble un peu dépassée. Dans le modèle actuel de vue webpack, il y a un répertoire public , pas un répertoire statique .
JakeParis
4

Petite mise à jour pour Laravel 5.x, placez votre favicon.icoou favicon.pngdans le /publicdossier et faites-y référence dans votre index.htmlcomme ceci:

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

J'espère que ça aide !

huit balles
la source
3

Pour une raison quelconque, les solutions ci-dessus ne fonctionnaient pas pour moi avant de convertir le favicon.icofichier par défaut favicon.pnget de le renommer par favicon-xyz.pngexemple (j'ai mis ce fichier dans un /publicdossier) et de modifier le index.htmlfichier comme suit:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="<%= BASE_URL %>favicon-xyz.png">
    .
    .
    .
</head>

Cela pourrait être utile pour quelqu'un.

Tjurkan
la source