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