VUE 项目自定义修改网页标题和图标

VUE 项目自定义修改网页标题和图标

标题修改

静态标题修改

• 标题修改直接在项目的 /public/index.html中修改title标签即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UiylRzvF-1607419484054)(./img/2.png)]

动态修改标题

• 在js文加下router.afterEach中配置title

    router.afterEach((to) => {
        document.title = to.meta.title 
    })

修改图标

• 找到自己需要的图片,在首先第一步，在pubic文件下并重命名为favicon.ico，将原来的图片替换掉

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CVENv5QN-1607419484059)(./img/3.png)]

• 第二步在vue.config.js中配置

module.exports = {
    pwa:{
        iconPaths:{
            favicon32:'./public/img/favicon.ico',
            favicon16:'./public/img/favicon.ico',
            appleTouchTcom:'./public/img/favicon.ico',
            maskIcon:'./public/img/favicon.ico',
            msTileImage:'./public/img/favicon.ico'
        }
    }
}

最后重启项目即可