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()
})