首頁  >  文章  >  web前端  >  vue.js中怎麼加入favicon圖標

vue.js中怎麼加入favicon圖標

coldplay.xixi
coldplay.xixi原創
2020-11-18 14:04:462485瀏覽

vue.js加入favicon圖示的方法:1.修改【index.html】文件,程式碼為【

本教學操作環境:windows10系統、vue2.9,本文適用於所有品牌的電腦。

【相關文章推薦:vue.js

vue.js新增favicon圖示的方法:

方法一:修改index.html檔

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

缺點:打包後需要將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 

打包後根目錄下就會有favicon. ico

相關免費學習推薦:JavaScript(影片)

#

以上是vue.js中怎麼加入favicon圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn