无SSR静态站点下如何实现nuxt-content关联查询（深度抓取）？

根因说明 #

你此前的逻辑在nuxt generate阶段失效，大概率是把关联处理逻辑放在了客户端运行时（比如onMounted）或者页面异步请求的后置处理中，静态生成阶段不会执行客户端逻辑，导致预渲染的静态文件没有嵌套关联后的数据。

解决方案 #

直接使用@nuxt/content内置的内容解析钩子，在静态编译阶段就完成所有关联字段的注入，后续查询直接拿到完整嵌套结构，完美适配无SSR静态站点场景。

步骤1：修改nuxt配置文件 #

在nuxt.config.ts中配置content:file:afterParse钩子，递归处理所有JSON5文件的关联字段：

export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  hooks: {
    async 'content:file:afterParse'(file) {
      // 仅处理JSON5格式的内容文件
      if (file._extension !== 'json5') return

      // 配置关联映射：键为要关联的字段名，值为对应内容文件所在的content子目录，根目录填空字符串
      const relationMap = {
        cars: '',
        parts: ''
      }

      // 递归关联解析函数
      const resolve = async (item) => {
        for (const [field, path] of Object.entries(relationMap)) {
          // 跳过不存在/非数组类型的关联字段
          if (!Array.isArray(item[field])) continue
          // 批量查询对应slug的内容文件
          item[field] = await Promise.all(
            item[field].map(async (slug) => {
              const [target] = await queryContent(path)
                .where({ _slug: slug })
                .find()
              // 递归处理当前关联项的内部关联字段
              if (target) await resolve(target)
              return target
            })
          )
        }
      }

      await resolve(file)
    }
  }
})

步骤2：页面直接查询使用 #

无需再额外写关联处理逻辑，直接查询即可拿到你期望的完整嵌套结构：

// 页面中查询data.json5的内容
const { data: pageData } = await useAsyncData('pageData', () => {
  return queryContent('/data').findOne()
})

此时pageData的结构就和你要求的完全一致，nuxt generate阶段会直接把处理完成的静态数据打包到输出文件中，不需要运行时二次处理。

注意事项 #

• 避免出现循环关联（比如A文件关联B，B又关联A），会导致递归死循环，可自行加层级限制或已处理标记规避
• 关联字段中存储的slug要和对应JSON5文件的文件名完全一致（忽略后缀），nuxt-content默认会用文件名作为_slug字段值
• 如果你的内容文件存放在content的子目录下，比如车辆文件都放在content/cars/目录，只要把relationMap中cars对应的值改为/cars即可

内容的提问来源于stack exchange，提问作者Derian André