以百度为例

打开网页，tab页都会有图标和标题，那么如何自定义呢？

vue.config.js

module.exports = {
...
//设置图标
  pwa: {
    iconPaths: {
      favicon32: 'avatar.png',
      favicon16: 'avatar.png',
      appleTouchIcon: 'avatar.png',
      maskIcon: 'avatar.png',
      msTileImage: 'avatar.png'
    }
  }, 
  chainWebpack: (config) => { 
    //设置index.html  的title   
    config.plugin('html').tap(args => {
      args[0].title = 'xxxx集团'
      return args
    })

	//设置路径变量名
    config.resolve.alias
    // 移除 prefetch 插件
    // .set('@',resolve('src'))
    .set('$api',resolve('src/api'))

  },

...
}

这里主要描述了 网页图标、标题 以及开发时路径变量名 ，vue.config.js其他配置请戳这里~

修改每个页面title

vue主要是用来单页面开发的，如果想每个页面的 标题动态改变，需要对路由进行操作

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home'
import Login from '@/views/Login'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta:{title:'这是首页'}
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta:{title:'这是登录页'}
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.afterEach((to,from,next) => {
  //遍历meta改变title
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  window.scrollTo(0,0);
});

export default router