web-dev-qa-db-fra.com

Vue CLI Favicon

J'utilise le modèle de Webpack Vue CLI, mais j'ai du mal à charger mon propre favicon.

J'ai exécuté vue init webpack my-app

Dans index.html j'ai inclus:

<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">

... et je vois le favicon par défaut (Vue). Cependant, je ne peux pas savoir où se trouve cet favicon (ou quelle que soit sa référence), ni trouver où placer mon propre favicon pour le remplacer.

J'ai également suivi les conseils donnés dans cette réponse , qui suggère de placer l'image favicon dans le dossier static et de l'inclure dans index.html:

<link rel="shortcut icon" type="image/png" href="/static/favicon.png"/>

Cependant, je n'ai pas accès à mon favicon, comme promis.

Je suppose que l'emplacement/le fichier favicon est référencé quelque part dans les fichiers de configuration CLI, mais je ne le trouve pas.

vuejs2faviconvue-cli
2
Alex Webster

Vous pouvez la traiter comme une image commune et le constructeur compilera l’ico comme une image normale. L'ico sera certainement intégré au code compilé, car il est léger. Donc, si votre index.html est dans src au même niveau que le répertoire img:

  • proj/src/index.html 
  • proj/src/img/favicon.ico

Vous aurez dans l'index.html:

 <link href='./img/favicon.png' rel="icon" Atype="image/x-icon" />

Ou vous pouvez simplement l'ajouter directement dans le répertoire public ou dist (où le projet est construit), et supprimer la balise favicon de votre index.html.

Si cela ne fonctionne pas, alors vous devrez peut-être regarder webpack config ... 

J'utilise vue-cli 3.0.0-beta.15 et crée mon projet avec: 

vue create proj

et le favicon est dans le répertoire public:

  • proj/public/favicon.ico
1
Lucile Fievet

J'ai le même problème:

  • J'ai ajouté mon propre favicon dans le dossier public, en écrasant celui existant. Mais toujours, la vue favicon apparaît; localement (vue serve) et sur mon serveur (chargé du contenu/dist construit avec vue build).
  • J'ai ensuite déplacé le favicon dans un nouveau dossier public/img. Et bien que ce dossier avec le favicon soit disponible dans les packages de débogage et de production, il n'a pas été utilisé dans le navigateur ... Le favicon de vue est toujours apparu. Mon hypothèse est la suivante: lorsqu’il construit le paquet dist, il ne recherche aucun fichier favicon.ico, et code simplement le lien favicon.

J'ai vérifié le fichier index.html et le lien créé indique une adresse de lien absolue pour une icône de favicon:

<link rel=icon href=/favicon.ico><title>

Après avoir changé l'adresse de "/" en "./", cela a fonctionné et my favicon a été affiché. J'imagine qu'il existe une option de configuration cachée quelque part dans la jungle de la configuration, Je n'ai pas encore trouvé ;-)

Si quelqu'un a une idée sur la façon de créer une version finale correcte (et si possible: débogage), ce serait génial!

0
hnuecke