Nuxt/Content项目运行报Maximum call stack size exceeded错误如何解决

你的配置存在两个问题，其中第一个是触发Maximum call stack size exceeded错误的直接原因：

• 核心错误：asyncData中调用$content时缺少.fetch()方法调用
  Nuxt Content 1.x 版本中，$content()方法返回的是查询构造器实例，而非实际解析后的文档内容，必须链式调用.fetch()才会执行查询并返回格式化后的文档对象。你直接将未执行的查询构造器传给<nuxt-content>组件，组件内部处理属性时触发了无限递归，最终导致调用栈溢出。
• 次要拼写错误：页面文件命名错误
  你将动态路由页面命名为_slag.vue，正确命名应该是_slug.vue，否则路由参数的key会是slag而非slug，后续访问非首页的内容路由时会无法正确获取参数值。

先将页面文件名修改为_slug.vue，再将文件内的asyncData逻辑调整为如下代码即可：

<template>
    <nuxt-content :document="doc" />
</template>

<script>
export default {
    async asyncData({ $content, params }) {
        // 补充.fetch()执行查询获取实际文档内容
        const doc = await $content(params.slug || 'index').fetch()
        return { doc }
    }
};
</script>

修改完成后重启项目即可正常运行。

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