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

 更新時間:2019年10月09日 11:23:41   作者:槿畔   我要評論
這篇文章主要介紹了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中進行,不會的請看歷史文章,有個介紹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圖標就被我們替換過來了.

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 深入理解vue Render函數

    深入理解vue Render函數

    本篇文章主要介紹了深入理解vue Render函數,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • vue實現購物車小案例

    vue實現購物車小案例

    這篇文章主要為大家詳細介紹了vue實現購物車小案例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • vue router導航守衛(router.beforeEach())的使用詳解

    vue router導航守衛(router.beforeEach())的使用詳解

    導航守衛主要用來通過跳轉或取消的方式守衛導航。這篇文章主要介紹了vue-router導航守衛(router.beforeEach())的使用,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • Vue自定義toast組件的實例代碼

    Vue自定義toast組件的實例代碼

    這篇文章主要介紹了Vue自定義toast組件的相關資料,需要的朋友可以參考下
    2018-08-08
  • 使用 vue 實例更好的監聽事件及vue實例的方法

    使用 vue 實例更好的監聽事件及vue實例的方法

    這篇文章主要介紹了使用 vue 實例更好的監聽事件及vue實例的方法,介紹了一種新增 vue 實例的方法,單獨監聽事件,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • Vue.js單向綁定和雙向綁定實例分析

    Vue.js單向綁定和雙向綁定實例分析

    這篇文章主要介紹了Vue.js單向綁定和雙向綁定,結合實例形式分析了vue.js單向綁定與雙向綁定相關原理、實現方法及操作技巧,需要的朋友可以參考下
    2018-08-08
  • Vue打包后出現一些map文件的解決方法

    Vue打包后出現一些map文件的解決方法

    本篇文章主要介紹了Vue打包后出現一些map文件的解決方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • 解決vue+element 鍵盤回車事件導致頁面刷新的問題

    解決vue+element 鍵盤回車事件導致頁面刷新的問題

    今天小編就為大家分享一篇解決vue+element 鍵盤回車事件導致頁面刷新的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Vue.Draggable拖拽功能的配置使用方法

    Vue.Draggable拖拽功能的配置使用方法

    這篇文章主要為大家詳細介紹了Vue.Draggable拖拽功能配置使用的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • vue-router項目實戰總結篇

    vue-router項目實戰總結篇

    vue-router 是 Vue.js 官方的路由庫.這篇文章主要介紹了vue-router項目實戰總結,需要的朋友可以參考下
    2018-02-02

最新評論

码报108