VUE3 项目自定义修改网页标题和图标

2020年12月2日 121次阅读 来源: 拿回忆下酒

以百度为例

《VUE3 项目自定义修改网页标题和图标》
打开网页，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
    原文作者：拿回忆下酒
    原文地址: https://blog.csdn.net/qq_38998250/article/details/114534772
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞