VUE3 项目自定义修改网页标题和图标
生活随笔
收集整理的這篇文章主要介紹了
VUE3 项目自定义修改网页标题和图标
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
VUE3中，網(wǎng)頁(yè)圖標(biāo)默認(rèn)使用的是VUE自帶的一個(gè)ico的圖標(biāo)，也是VUE的logo。那么作為我們自己開(kāi)發(fā)的項(xiàng)目，如何自定義修改網(wǎng)頁(yè)的圖標(biāo)和標(biāo)題呢？很簡(jiǎn)單，下面就介紹一下。
1 標(biāo)題修改
標(biāo)題修改直接在項(xiàng)目的 /public/index.html中修改title標(biāo)簽即可。
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>vue-manage-system</title></head>2 圖標(biāo)修改
這個(gè)修改相對(duì)來(lái)說(shuō)，需要以下幾個(gè)步驟。
1）首先做一個(gè)ico的小圖標(biāo)，命名為 favicon.ico 放在 /public/下面，替換原有的 favicon.ico，同時(shí)刪除 /public/img/icons/ 下面的VUE圖片。
2）在根目錄下面新建vue.config.js， 添加pwa
module.exports = {pwa: {iconPaths: {favicon32: 'favicon.ico',favicon16: 'favicon.ico',appleTouchIcon: 'favicon.ico',maskIcon: 'favicon.ico',msTileImage: 'favicon.ico'}} };3 重啟項(xiàng)目即可。
總結(jié)
以上是生活随笔為你收集整理的VUE3 项目自定义修改网页标题和图标的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： miui怎么用第三方图标包_小米用户必备
- 下一篇： ttf字体