https://img-blog.csdnimg.cn/img_convert/5045d1ece3c3aefeef6c0fd88ed55dcc.png
一、更改vue项目中浏览器的title
方法一：在vue.config.js文件，添加如下代码：
chainWebpack: config => { config.plugin('html') .tap(args => { args[0].title = '标题'; return args; ) }
方法二：直接在public/index.html中修改title即可，如下：
<!DOCTYPE html> <html lang="en"> <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"> <title>要修改显示的标题</title> </head> <body> </body> </html>
二、更改vue项目中浏览器的图标
1、首先做一个ico的小图标，命名为 favicon.ico 放在 /public/下面，替换原有的 favicon.ico，需要可以备份原有的 favicon.ico。
2、在 /public/index.html/里验证，是否引用了 favicon.ico 图标名称。
三、动态控制项目中浏览器的title
通过路由导航守卫设置，使用Vue-Router的beforeEach拦截
/* 第一步：在router中的index.js路由下设置mate属性*/ routes: [{ path: '/', name: 'home', component: () => import('@/pages/home/index'), meta:{ keepAlive: true } }, { path: '/person/auth, name: 'personAuth', component: () => import('@/pages/person/auth), meta:{ title: '功能授权', keepAlive: false } } ] /* 第二步：在路由守卫router.beforeEach中设置如下代码 */ router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.title) { document.title = to.meta.title } })
———————————————— 原文链接：https://blog.csdn.net/lovecoding1/article/details/128718940