vue3修改link標簽默認icon無效問題

vue3修改link中標簽默認icon,vue3初次使用的時候不好好閱讀配置難免會遇到一些坑,本人在項目完結的時候打算把瀏覽器的導航小icon圖標給替換了,可是並沒有那么順利,那么如何在vue3中替換默認的icon(favicon.ico)的導航欄圖標呢:

public的index.html有這么一句話,毫無疑問,一看給人的感覺就是在這個位置替換了

 

 

 

而且favicon.ico也是小圖標,於是我直接替換,發現並不生效（特殊情況）,把<%= BASE_BA %>直接改成./發現也不生效,怎么回事呢?

我們順着問題進行查找,f12打開瀏覽器調試台查看結構中的icon link href指向

 

 

居然多了這么多圖標地址,還是看官方配置吧,原來是忽略了pwa這個配置(該配置在vue.config.js中進行,這個地方將favicon.ico換成自己的圖標地址即可):

pwa:{
        iconPaths:{
            favicon32: 'favicon.ico',
            favicon16: 'favicon.ico',
            appleTouchIcon: 'favicon.ico',
            maskIcon: 'favicon.ico',
            msTileImage: 'favicon.ico'
        }
    },

　　配置完畢，項目重啟，圖標就換成我們自己的了