Vue 动态修改网页标题和图标

川长思鸟来 2022-11-07 01:44 974阅读 0赞

VUE2：

### 二、普通方案，使用Vue-Router的beforeEach拦截 ###

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
          }
        }
      ]
    
    在路由的beforeEach 拦截器里处理
    
    router.beforeEach((to, from, next) => {
      /* 路由发生变化修改页面title */
      if (to.meta.title) {
        document.title = to.meta.title
      }
    })

VUE3中，网页图标默认使用的是VUE自带的一个ico的图标，也是VUE的logo。那么作为我们自己开发的项目，如何自定义修改网页的图标和标题呢？很简单，下面就介绍一下。

1 标题修改  
标题修改直接在项目的 /public/index.html中修改title标签即可。

<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">  
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
    <title>明月网址导航</title>  
  </head>  
2 图标修改  
这个修改相对来说，需要以下几个步骤。

1）首先做一个ico的小图标，命名为 favicon.ico 放在 /public/下面，替换原有的 favicon.ico，同时删除 /public/img/icons/ 下面的VUE图片。

2）在根目录下面新建vue.config.js， 添加pwa

module.exports = \{  
    pwa: \{  
        iconPaths: \{  
            favicon32: 'favicon.ico',  
            favicon16: 'favicon.ico',  
            appleTouchIcon: 'favicon.ico',  
            maskIcon: 'favicon.ico',  
            msTileImage: 'favicon.ico'  
        \}  
    \}  
\};  
3 重启项目即可。