Heim  >  Artikel  >  Web-Frontend  >  So fügen Sie ein Favicon-Symbol in vue.js hinzu

So fügen Sie ein Favicon-Symbol in vue.js hinzu

coldplay.xixi
coldplay.xixiOriginal
2020-11-18 14:04:462483Durchsuche

So fügen Sie ein Favicon-Symbol in vue.js hinzu: 1. Ändern Sie die Datei [index.html]. Der Code lautet [

Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.9, dieser Artikel gilt für alle Computermarken

[Empfohlene verwandte Artikel: vue.js ]

vue. So fügen Sie ein Favicon-Symbol in js hinzu:

Methode 1: Ändern Sie die Datei index.html

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

Nachteil: Sie müssen favicon.ico kopieren das Stammverzeichnis nach dem Packen favicon.ico复制到根目录

方法二:修改webpack配置文件

1、找到build下的webpack.dev.conf.js文件

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

2、找到build下的webpack.prod.conf.js文件

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

方法三 :vue项目打包后favicon无法正常显示

解决方法:

在webpack.prod.config.js中的HtmlWebpackPlugin插件选项中配置favicon选项,其中favicon的路径是个相对路径

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

修改配置文件后需重启npm run dev

Methode 2: Webpack-Konfigurationsdatei ändern

1. Suchen Sie die Datei webpack.dev.conf.js unter buildrrreee2. Suchen Sie die Datei webpack.prod.conf.js unter build

rrreee
🎜Methode 3: Favicon kann nicht verwendet werden, nachdem das Vue-Projekt gepackt wurde. Normale Anzeige🎜🎜🎜Lösung:🎜🎜Konfigurieren Sie die Favicon-Option in der HtmlWebpackPlugin-Plugin-Option in webpack.prod.config.js, wo der Pfad zum Favicon ist ist ein relativer Pfad JavaScript🎜 (Video) 🎜🎜

Das obige ist der detaillierte Inhalt vonSo fügen Sie ein Favicon-Symbol in vue.js hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:So verwenden Sie vue.prototypeNächster Artikel:So verwenden Sie vue.prototype