vu-cli4修改html页面的标题

最新推荐文章于 2023-05-11 18:56:25 发布

陈小白_weilin

最新推荐文章于 2023-05-11 18:56:25 发布

阅读量2.1k

点赞数

文章标签： vue-cli 标题

本文链接：https://blog.youkuaiyun.com/qq_37564189/article/details/108020407

版权

第一种情况整个页面都是用统一标题的

在项目的根目录创建一个vue.config.vue文件，添加上 chainWebpack，修改args里的参数配置，重新返回就可以

module.exports = {
	publicPath: './',
	/* 修改html标题 */
	chainWebpack: config => {
		config.plugin('html')
			.tap(args => {
				console.log(args);
				args[0].title = "标题的名称";
				return args;
			})
	}
}

第二种情况根据页面，更换标题的名字，那就要动态的变化

2.1 router配置

第一步在route配置一个meta参数配置

{
				// path: 'articleContent',
				path: '/',
				name: 'articleContent',
				component: () => import( /* webpackChunkName: "articleContent" */ '../views/home/article/article.vue'),
				meta : {
					title:'课程',
				},
				
			},

第二步在 mian.js 监听路由的改变动态修改标题 beforeEach或者wath 都可以

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

2.2 通过插接 metainfo 插件配置

npm install vue-meta --save

在mian.js 引入

 import Meta from 'vue-meta'
    Vue.use(Meta)

在需要配置的页面配置, 或者在main.js使用 mixin函数配置

<template>
  <div>
    <h1>{{{ title }}}</h1>
  </div>
</template>

<script>
  export default {
    name: 'des',
    data () {
      return {
        title: ''
        description: '这是一篇文章...'
      }
    },
    metaInfo () {
      return {
        title: this.title,
        meta: [
          { vmid: 'description', name: 'description', content: this.description }
        ]
      }
    },
  
  }
</script>