vue项目设置浏览器标题title及图标

方法一：在vue.config.js文件，添加如下代码：方法二：直接在public/index.html中修改title即可，如下：二、动态设置标题方案方法一：通过路由导航守卫设置，使用Vue-Router的beforeEach拦截方法二：使用插件vue-wechat-title来设置浏览器动态标题三、图标修改1、首先做一个ico的小图标，命名为 favicon.ico 放在 /public/下面

Aaron_杀死庸碌

9393人浏览 · 2022-07-14 11:30:34

Aaron_杀死庸碌 · 2022-07-14 11:30:34 发布

一、固定设置标题方案

方法一：在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>