一、固定设置标题方案
方法一：在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-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}})
方法二：使用插件vue-wechat-title来设置浏览器动态标题
/* 第一步：安装插件 */npm vue-wechat-title --save/* 第二步:在全局main.js引入、使用该插件 */import VueWechatTitle from 'vue-wechat-title' //可以动态修改浏览器标题的插件Vue.use(VueWechatTitle);/* 第三步：在router中的index.js路由下设置mate属性 */const routes = [{path: '/about',name: 'About',component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),meta:{title:'关于'}},{path: '/test',name: 'Test',component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue'),meta:{title:'测试'}},]/* 第四步：我们在APP.vue使用vue-wechat-title插件 */<router-view v-wechat-title="$route.meta.title"/>
三、图标修改
1、首先做一个ico的小图标，命名为 favicon.ico 放在 /public/下面，替换原有的 favicon.ico，需要可以备份原有的 favicon.ico。
2、在 /public/index.html/里验证，是否引用了 favicon.ico 图标名称。
<!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>
3、重启项目即可。
