vue3修改link標(biāo)簽?zāi)J(rèn)icon無效問題詳解
vue3修改link中標(biāo)簽?zāi)J(rèn)icon,vue3初次使用的時(shí)候不好好閱讀配置難免會遇到一些坑,本人在項(xiàng)目完結(jié)的時(shí)候打算把瀏覽器的導(dǎo)航小icon圖標(biāo)給替換了,可是并沒有那么順利,那么如何在vue3中替換默認(rèn)的icon(favicon.ico)的導(dǎo)航欄圖標(biāo)呢:
public的index.html有這么一句話,毫無疑問,一看給人的感覺就是在這個(gè)位置替換了
而且favicon.ico也是小圖標(biāo),于是我直接替換,發(fā)現(xiàn)并不生效（特殊情況）,把<%= BASE_BA %>直接改成./發(fā)現(xiàn)也不生效,怎么回事呢?
我們順著問題進(jìn)行查找,f12打開瀏覽器調(diào)試臺查看結(jié)構(gòu)中的icon link href指向
居然多了這么多圖標(biāo)地址,還是看官方配置吧,原來是忽略了pwa這個(gè)配置(該配置在vue.config.js中進(jìn)行,不會的請看歷史文章,有個(gè)介紹vue-config.js的配置介紹):
pwa里面有個(gè)iconPaths這個(gè)選項(xiàng)可以用來替換地址,官網(wǎng)沒有詳細(xì)說明,在gitHup上有介紹----點(diǎn)擊去PWA配置
pwa:{
iconPaths:{
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
}
},
修改完配置,別忘了,結(jié)束項(xiàng)目重新啟動
再次啟動就會發(fā)現(xiàn),icon圖標(biāo)就被我們替換過來了.
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+element Plus實(shí)現(xiàn)在table中增加一條表單數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue3+element Plus實(shí)現(xiàn)在table中增加一條表單數(shù)據(jù)的操作,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
VUE?項(xiàng)目如何使用?Docker+Nginx進(jìn)行打包部署
使用?Docker,你可以創(chuàng)建一個(gè)包含?Vue.js?應(yīng)用程序的容器鏡像,并在任何支持?Docker?的環(huán)境中運(yùn)行該鏡像,這篇文章主要介紹了VUE?項(xiàng)目用?Docker+Nginx進(jìn)行打包部署,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了watch里面的deep和immediate作用及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue router組件狀態(tài)刷新消失的問題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程
在Vue中使用JSON文件有多種方式,包括使用fetch方法加載JSON文件、使用axios庫加載JSON文件,以及將JSON文件導(dǎo)入為模塊,這篇文章主要介紹了Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程,需要的朋友可以參考下2024-01-01
vue2使用思維導(dǎo)圖jsmind的詳細(xì)代碼
jsMind是一個(gè)基于Js的思維導(dǎo)圖庫,jsMind是一個(gè)純JavaScript類庫,用于創(chuàng)建、展示和操作思維導(dǎo)圖,這篇文章主要給大家介紹了關(guān)于vue2使用思維導(dǎo)圖jsmind的詳細(xì)代碼,需要的朋友可以參考下2024-06-06
BuildAdmin elementPlus自定義表頭添加tooltip方法示例
這篇文章主要介紹了BuildAdmin elementPlus 自定義表頭,添加tooltip實(shí)現(xiàn)方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
這篇文章主要介紹了Vue如何引用public中的js文件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue.native如何將原生事件綁定到組件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue3?關(guān)于reactive的重置問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05