Le projet Vue définit le titre et l'icône du titre du navigateur

1. Changer le titre du navigateur dans le projet vue

Méthode 1 : Dans le fichier vue.config.js, ajoutez le code suivant :

chainWebpack: config => {
        config.plugin('html')
            .tap(args => {
                args[0].title = '标题';
                return args;
        )
}

Méthode 2 : Modifiez simplement le titre directement dans public/index.html, comme suit :

<!DOCTYPE html>
<html lang="en">
  <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">
    <title>要修改显示的标题</title>
  </head>
  <body>
  </body>
</html>

2. Changer l'icône du navigateur dans le projet vue

1. Commencez par créer une petite icône ico, nommez-la favicon.ico et placez-la sous /public/ pour remplacer le favicon.ico d'origine. Vous devez sauvegarder le favicon.ico d'origine.

2. Vérifiez dans /public/index.html/ si le nom de l'icône favicon.ico est référencé.

3. Contrôlez dynamiquement le titre du navigateur dans le projet

Protégez les paramètres grâce à la navigation d'itinéraire , en utilisant l'interception beforeEach de Vue-Router

/* 第一步:在router中的index.js路由下设置mate属性*/ 
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
      }
    }
  ]
 
/* 第二步:在路由守卫router.beforeEach中设置如下代码 */
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
})

Je suppose que tu aimes

Origine blog.csdn.net/lovecoding1/article/details/128718940
conseillé
Classement