vue-cli 4 配置标题

配置全局默认标题 在vue.config.js 中设置

module.exports = {
    //配置主路径
    publicPath: '/web',
    chainWebpack: config => {
        //设置标题  默认不设置的话是项目名字
        config.plugin('html').tap(args => {
          args[0].title = "默认标题"
          return args
        })
    }
}

或者在路由配置上设置 meta 的 title参数 但是需要使用router.beforeEach 里面处理 

 

const routes = [
    {
    path: '/test',
    name: '测试',
    component: () => import('../views/Test'),
    meta: {
      title: '测试界面'
    }
  }，
    {
    path: '/hi',
    name: '欢迎',
    component: () => import('../views/Hi'),
    meta: {
      title: '欢迎界面'
    }
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    next()
})