Maison  >  Article  >  interface Web  >  Que dois-je faire si le favicon de la petite icône Vue ne s'affiche pas ?

Que dois-je faire si le favicon de la petite icône Vue ne s'affiche pas ?

小云云
小云云original
2018-02-08 13:33:532418parcourir

Bien que vue scaffolding soit facile à utiliser, le problème de configuration des fichiers a toujours été un casse-tête. Cet article vous présente principalement la solution au problème que le favicon de la petite icône Vue n'affiche pas. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

En utilisant le framework vue pour créer du code natif, divers problèmes sont également survenus lors de la définition de petites icônes auparavant. J'ai résumé les solutions en ligne et noté mes expériences personnelles et la solution qui a fonctionné :

J'ai déposé favico.ico directement dans le répertoire racine (qui est le répertoire au même niveau que src), puis je l'ai configuré dans le fichier build/webpack.dev.conf.js


1. Ajoutez ce code aux plugins dans le fichier webpack.dev.conf.js


new HtmlWebpackPlugin({
   filename: 'index.html',
   template: 'index.html',
   inject: true,
   favicon: './favicon.ico' 
  })
Après avoir ajouté le code, cela ressemble à ceci :

2. Introduisez le code dans index.html :


<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" rel="external nofollow" />
3. après avoir modifié le fichier de configuration, Run dev fonctionnera

À propos de Google Chrome qui n'affiche pas les petites icônes : C'est un problème de cache, essayez de forcer l'actualisation manuellement (ctrl+F5)

Remarque : (Vous pouvez également mettre le favicon dans le dossier statique Oui, parce que cela n'a pas fonctionné pour moi, j'ai utilisé cette méthode. Si je mets static, j'ai juste besoin de changer le chemin du favicon )

Recommandations associées :

.

Deux. Une méthode JS pour ajouter de petites icônes à Input

Partage des techniques de traitement front-end pour les petites icônes

Icônes de police d'icônes et diverses petites icônes CSS Explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn