溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發(fā)布時間：2020-09-25 01:27:19 來源：腳本之家 閱讀：249 作者：槿畔 欄目：web開發(fā)

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

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

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

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

而且favicon.ico也是小圖標,于是我直接替換,發(fā)現(xiàn)并不生效（特殊情況）,把<%= BASE_BA %>直接改成./發(fā)現(xiàn)也不生效,怎么回事呢?

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

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

居然多了這么多圖標地址,還是看官方配置吧,原來是忽略了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'
  }
 },

修改完配置,別忘了,結束項目重新啟動

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

再次啟動就會發(fā)現(xiàn),icon圖標就被我們替換過來了.

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手