Nuxt2如何获取nuxt.config.js的head配置设置页面og:title

适用版本：Nuxt 2.14.5

你之前通过this.title、this.$config、this.$route.meta无法获取全局head配置，是因为Nuxt2未将初始化的head配置挂载到上述属性上，可通过以下两种方案实现需求：

• 直接读取Nuxt实例上存储的全局配置
• 抽离公共配置项到runtimeConfig统一调用（维护性更好，推荐）

方案1：通过$nuxt.$options.head直接读取 #

Nuxt2实例的$options属性中存储了nuxt.config.js初始化时传入的所有配置，全局head配置可直接通过this.$nuxt.$options.head获取，页面组件中使用示例如下：

// about.vue
export default {
  data () {
    return {
      pageTitle: 'PAGE TITLE',
      description: 'PAGE DESCRIPTION',
    }
  },
  head () {
    // 读取全局head配置
    const globalHead = this.$nuxt.$options.head
    const siteName = globalHead.title
    // 也可读取全局meta中任意配置项，比如默认og图
    // const defaultOgImg = globalHead.meta.find(item => item.hid === 'og:image').content

    return {
      title: this.pageTitle,
      meta: [
        { hid: 'description', name: 'description', content: this.description },
        { hid: 'itemprop-name', itemprop: 'name', content: `${this.pageTitle} | ${siteName}` },
        { hid: 'itemprop-description', itemprop: 'description', content: this.description },
        { hid: 'og:title', property: 'og:title', content: `${this.pageTitle} | ${siteName}` },
        { hid: 'og:description', property: 'og:description', content: this.description },
        { hid: 'twitter:title', name: 'twitter:title', content: `${this.pageTitle} | ${siteName}` },
        { hid: 'twitter:description', name: 'twitter:description', content: this.description }
      ]
    }
  }
}

方案2：抽离公共配置到publicRuntimeConfig（推荐） #

如果后续需要修改站点名、默认og图等全局信息，直接硬读head配置需要同时修改nuxt.config内的head和页面逻辑，维护成本高。推荐将公共配置抽离到publicRuntimeConfig中，nuxt.config的head和页面组件都可以统一读取，修改时只需要改一处：

1. 首先修改nuxt.config.js配置：

// nuxt.config.js
export default {
  publicRuntimeConfig: {
    siteName: 'SITE NAME',
    siteDescription: 'SITE DESCRIPTION',
    baseUrl: process.env.BASE_URL,
    defaultOgImage: process.env.BASE_URL + '/assets/img/og_img.png'
  },
  // 把原来的head对象改成函数，读取runtimeConfig配置
  head() {
    const config = this.publicRuntimeConfig
    return {
      title: config.siteName,
      titleTemplate: `%s | ${config.siteName}`,
      meta: [
        { charset: 'utf-8' },
        { 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: config.siteDescription },
        { hid: 'itemprop-name', itemprop: 'name', content: config.siteName },
        { hid: 'itemprop-description', itemprop: 'description', content: config.siteDescription },
        { hid: 'itemprop-image', itemprop: 'image', content: config.defaultOgImage },
        { hid: 'og:site_name', property: 'og:site_name', content: config.siteName },
        { hid: 'og:title', property: 'og:title', content: config.siteName },
        { hid: 'og:description', property: 'og:description', content: config.siteDescription },
        { hid: 'og:url', property: 'og:url', content: config.baseUrl },
        { hid: 'og:image', property: 'og:image', content: config.defaultOgImage },
        { hid: 'og:image:width', property: 'og:image:width', content: '1200' },
        { hid: 'og:image:height', property: 'og:image:height', content: '630' },
        { hid: 'og:type', property: 'og:type', content: 'website' },
        { hid: 'twitter:card', name: 'twitter:card', content: 'summary_large_image' },
        { hid: 'twitter:title', name: 'twitter:title', content: config.siteName },
        { hid: 'twitter:description', name: 'twitter:description', content: config.siteDescription },
        { hid: 'twitter:image', name: 'twitter:image', content: config.defaultOgImage }
      ]
    }
  }
}

2. 页面组件中直接通过this.$config读取公共配置即可：

// about.vue
export default {
  data () {
    return {
      pageTitle: 'PAGE TITLE',
      description: 'PAGE DESCRIPTION',
    }
  },
  head () {
    const { siteName } = this.$config
    return {
      title: this.pageTitle,
      meta: [
        { hid: 'description', name: 'description', content: this.description },
        { hid: 'itemprop-name', itemprop: 'name', content: `${this.pageTitle} | ${siteName}` },
        { hid: 'itemprop-description', itemprop: 'description', content: this.description },
        { hid: 'og:title', property: 'og:title', content: `${this.pageTitle} | ${siteName}` },
        { hid: 'og:description', property: 'og:description', content: this.description },
        { hid: 'twitter:title', name: 'twitter:title', content: `${this.pageTitle} | ${siteName}` },
        { hid: 'twitter:description', name: 'twitter:description', content: this.description }
      ]
    }
  }
}

注意：Nuxt2的meta标签合并逻辑为同hid的标签会被页面配置覆盖，不同hid的标签会自动继承全局配置，你不需要在每个页面重复编写og:image、og:url、twitter:card这类全局统一的标签，只需要覆写页面差异化的title、description类标签即可，大幅减少重复代码。

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