VUE3 项目自定义修改网页标题和图标
生活随笔
收集整理的這篇文章主要介紹了
VUE3 项目自定义修改网页标题和图标
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
VUE3中，網頁圖標默認使用的是VUE自帶的一個ico的圖標，也是VUE的logo。那么作為我們自己開發的項目，如何自定義修改網頁的圖標和標題呢？很簡單，下面就介紹一下。
1 標題修改
標題修改直接在項目的 /public/index.html中修改title標簽即可。
<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 圖標修改
這個修改相對來說，需要以下幾個步驟。
1）首先做一個ico的小圖標，命名為 favicon.ico 放在 /public/下面，替換原有的 favicon.ico，同時刪除 /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 重啟項目即可。
總結
以上是生活随笔為你收集整理的VUE3 项目自定义修改网页标题和图标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： miui怎么用第三方图标包_小米用户必备
- 下一篇： ttf字体