Nuxt页面head函数失效：无法自定义标题与Meta标签

我用Nuxt构建了一个网页，想要给不同页面设置不同的页面标题和Meta描述。查阅Nuxt文档后使用了head()方法，但这个方法完全没生效。

我的contact.vue代码如下：

export default class Contact extends Vue {
  head() {
    return {
      title: 'Contact page',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'This is a contact page'
        }
      ]
    }
  }
}

我的nuxt.config.js配置如下：

head: {
  title: 'My website',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    {
      hid: 'description',
      name: 'description',
      content: process.env.npm_package_description || ''
    }
  ],
}

按照文档预期应该生成对应Meta标签，但实际仅显示nuxt.config.js中声明的标题与Meta描述，请问我遗漏了什么？

嘿，这个问题我之前也踩过坑——你用的是Vue类组件写法，但head()钩子的定义方式不对！Nuxt的head是组件的选项配置，不是类的实例方法，直接写在类里Nuxt根本识别不到。

具体修正步骤如下：

1. 先确认你已经安装了vue-property-decorator（如果没装，执行npm install vue-property-decorator或者yarn add vue-property-decorator）
2. 在contact.vue中导入Component装饰器，把head()方法放到@Component的配置对象里

修正后的contact.vue代码：

import { Component, Vue } from 'vue-property-decorator'

@Component({
  head() {
    return {
      title: 'Contact page',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'This is a contact page'
        }
      ]
    }
  }
})
export default class Contact extends Vue {
  // 这里放你的组件逻辑，比如数据、方法之类的
}

另外补充个小细节：你已经做得很好的一点是全局和页面的hid值保持一致（都是description），这样Nuxt会替换全局的Meta标签，而不是新增一个重复的，这点要继续保持~

内容的提问来源于stack exchange，提问作者Cas