vue3修改link中標籤默認icon,vue3初次使用的時候不好好閱讀配置難免會遇到一些坑,本人在項目完結的時候打算把瀏覽器的導航小icon圖標給替換了,可是並沒有那麼順利,那麼如何在vue3中替換默認的icon(favicon.ico)的導航欄圖標呢:
public的index.html有這麼一句話,毫無疑問,一看給人的感覺就是在這個位置替換了
而且favicon.ico也是小圖標,於是我直接替換,發現並不生效(特殊情況),把<%= BASE_BA %>直接改成./發現也不生效,怎麼回事呢?
我們順着問題進行查找,f12打開瀏覽器調試臺查看結構中的icon link href指向
居然多了這麼多圖標地址,還是看官方配置吧,原來是忽略了pwa這個配置(該配置在vue.config.js中進行,不會的請看歷史文章,有個介紹vue-config.js的配置介紹):
pwa裏面有個iconPaths這個選項可以用來替換地址,官網沒有詳細說明,在gitHup上有介紹----點擊去PWA配置
pwa:{
iconPaths:{
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
}
},
修改完配置,別忘了,結束項目重新啓動
再次啓動就會發現,icon圖標就被我們替換過來了.