Comment ajouter une icône favicon dans vue.js

Comment ajouter une icône favicon dans vue.js : 1. Modifiez le fichier [index.html], le code est [

L'environnement d'exploitation de ce tutoriel : système Windows 10, vue2.9, cet article est applicable à toutes les marques d'ordinateurs

[Recommandations d'articles associés :

vue.js]

Comment ajouter des icônes favicon dans vue.js :

Méthode 1 : Modifier le fichier index.html

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

Inconvénient : Vous devez copier

dans le répertoire racine après l'empaquetage favicon.ico

Méthode 2 : Modifier le fichier de configuration du webpack

1. Recherchez le fichier webpack.dev.conf.js sous build

new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: path.resolve('favicon.ico') // 新增
}),

2. fichier sous build

new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: path.resolve('favicon.ico'), //新增
minify: {
emoveComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
...
}),

Méthode 3 : Le favicon ne peut pas être affiché normalement une fois le projet vue empaqueté

Solution :

Configurez l'option favicon dans l'option du plug-in HtmlWebpackPlugin dans webpack.prod.config.js, où Le chemin du favicon est un chemin relatif

new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
favicon: 'src/assets/img/favicon.ico',
inject: true
}),

Vous devez redémarrer après avoir modifié le fichier de configuration

npm run dev

Après emballage, il y aura favicon.ico dans le répertoire racine

Apprentissage recommandé gratuit associé :

JavaScript (vidéo)

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!