這篇文章主要介紹了vue.js中添加favicon圖標(biāo)的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的白城網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

vue.js添加favicon圖標(biāo)的方法：1、修改【index.html】文件，代碼為【

缺點：打包后需要將favicon.ico復(fù)制到根目錄

方法二：修改webpack配置文件

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

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

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

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

方法三 ：vue項目打包后favicon無法正常顯示

解決方法：

在webpack.prod.config.js中的HtmlWebpackPlugin插件選項中配置favicon選項，其中favicon的路徑是個相對路徑

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享vue.js中添加favicon圖標(biāo)的方法內(nèi)容對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!

網(wǎng)站名稱：vue.js中添加favicon圖標(biāo)的方法
文章轉(zhuǎn)載：http://weahome.cn/article/jhdpog.html