Nuxt.js静态站点如何配置从API获取的动态meta标签？

核心问题原因 #

• 错误引用全局变量：你在metaInfo方法中直接使用了组件外声明的pageMeta全局变量，而非props传入的组件内部的pageMeta属性，导致读取的内容始终是空值
• Prop声明不规范：props中pageMeta的声明不符合Vue规范，可能触发类型校验失败导致属性值无法正常接收
• 静态生成时机问题：执行nuxt generate生成静态站点时，需要确保meta数据在页面预渲染阶段就已经获取完成，不能在客户端异步加载后才传入，否则静态打包时无法读取到动态内容

修复步骤 #

1. 修正组件内metaInfo的引用逻辑 #

调整metaInfo的取值逻辑，指向组件props的pageMeta，同时添加空值兜底避免报错，修正后的组件代码如下：

const apiBase: string = 'https://strapi.xyz.com'

export default Vue.extend({
  components: { Greeting, Showcase, Features, Footer },

  props: {
    data: Map,
    // 规范prop声明，指定类型和默认值
    pageMeta: {
      type: Object,
      default: () => ({
        description: '',
        author: ''
      })
    }
  },

  data() {
    return {
      loading: true,
    }
  },

  metaInfo(): any {
    return {
      meta: [
        {
          hid: 'description',
          name: 'description',
          // 引用组件props的pageMeta，而非全局变量
          content: this.pageMeta.description,
        },
        {
          hid: 'author',
          name: 'author',
          content: this.pageMeta.author,
        },
      ],
    }
  },
})

2. 确保静态生成阶段meta数据已提前获取 #

在首页页面组件（pages/index.vue）中使用asyncData方法提前请求Strapi接口获取数据，再传入子组件，保证预渲染阶段就能拿到meta内容：

// pages/index.vue 示例代码
export default {
  async asyncData() {
    // 预渲染阶段请求Strapi数据
    const res = await fetch('https://strapi.xyz.com/api/home-page')
    const pageData = await res.json()
    return {
      pageMeta: pageData.data.meta,
      pageContent: pageData.data.content
    }
  },
  // 渲染对应端的组件并传入props
  render(h) {
    const IndexComponent = this.$isMobile ? h('index-mobile', {
      props: {
        data: this.pageContent,
        pageMeta: this.pageMeta
      }
    }) : h('index-web', {
      props: {
        data: this.pageContent,
        pageMeta: this.pageMeta
      }
    })
    return IndexComponent
  }
}

3. 可选：配置静态生成路由预爬取 #

如果站点有多个动态页面需要生成，可以在nuxt.config.js中配置generate配置项，提前拉取Strapi的所有内容路由，保证每个页面的meta都能在打包时正常生成：

// nuxt.config.js 部分配置
export default {
  generate: {
    routes: async () => {
      const res = await fetch('https://strapi.xyz.com/api/pages')
      const pages = await res.json()
      return pages.data.map(page => `/${page.attributes.slug}`)
    }
  }
}

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