vue3修改link標簽默認icon無效問題詳解
更新時間：2019年10月09日 11:23:41 作者：槿畔
這篇文章主要介紹了vue3修改link標簽默認icon無效問題詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
vue3修改link中標簽默認icon,vue3初次使用的時候不好好閱讀配置難免會遇到一些坑,本人在項目完結(jié)的時候打算把瀏覽器的導航小icon圖標給替換了,可是并沒有那么順利,那么如何在vue3中替換默認的icon(favicon.ico)的導航欄圖標呢:
public的index.html有這么一句話,毫無疑問,一看給人的感覺就是在這個位置替換了
而且favicon.ico也是小圖標,于是我直接替換,發(fā)現(xiàn)并不生效（特殊情況）,把<%= BASE_BA %>直接改成./發(fā)現(xiàn)也不生效,怎么回事呢?
我們順著問題進行查找,f12打開瀏覽器調(diào)試臺查看結(jié)構(gòu)中的icon link href指向
居然多了這么多圖標地址,還是看官方配置吧,原來是忽略了pwa這個配置(該配置在vue.config.js中進行,不會的請看歷史文章,有個介紹vue-config.js的配置介紹):
pwa里面有個iconPaths這個選項可以用來替換地址,官網(wǎng)沒有詳細說明,在gitHup上有介紹----點擊去PWA配置
pwa:{
iconPaths:{
favicon32: 'favicon.ico',
favicon16: 'favicon.ico',
appleTouchIcon: 'favicon.ico',
maskIcon: 'favicon.ico',
msTileImage: 'favicon.ico'
}
},
修改完配置,別忘了,結(jié)束項目重新啟動
再次啟動就會發(fā)現(xiàn),icon圖標就被我們替換過來了.
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue3組件庫Shake抖動組件搭建過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作
這篇文章主要介紹了全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue彈窗如何嵌入其它vue頁面,實現(xiàn)方式是將其他頁面作為組件傳入，在父頁面將該組件引入到彈框內(nèi)，實例代碼簡單易懂需要的朋友可以參考下2022-11-11
今天小編就為大家分享一篇對Vue.js實現(xiàn)表格渲染的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
VUE是一套前端框架，免除了原生JavaScript中的DOM操作，簡化書寫。VUE基于MVVM（Model-View_ViewModel）思想，實現(xiàn)數(shù)據(jù)雙向綁定。Vue的核心庫只關(guān)注圖層.響應式數(shù)據(jù)綁定和組件化開發(fā)是其兩大特點。2023-01-01
這篇文章主要為大家詳細介紹了vue的全選組件封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
在開發(fā)過程中,有時候會遇到這么一種情況,通過動態(tài)的賦值,但是dom沒有及時更新,能夠獲取到動態(tài)賦的值,但是無法獲取到雙向綁定的dom節(jié)點,這就需要我們手動進行強制刷新組件,下面這篇文章主要給大家介紹了關(guān)于vue組件強制刷新的4種方案,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue2響應式系統(tǒng)之set和delete，通過為對象收集依賴，將對象、數(shù)組的修改、刪除也變成響應式的了，同時為用戶提供了和方法，下文詳細介紹需要的朋友可以參考一下2022-04-04
v-model就是vue的雙向綁定的指令，能將頁面上控件輸入的值同步更新到相關(guān)綁定的data屬性，也會在更新data綁定屬性時候，更新頁面上輸入控件的值2022-09-09
vue.js 實現(xiàn)圖片本地預覽 裁剪 壓縮 上傳功能
這篇文章主要介紹了vue.js 實現(xiàn)圖片本地預覽裁剪壓縮上傳功能,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-03-03