静态生成站点时，Nuxt3 内容 v2 在 netlify 上刷新页面时中断

Question

我用 nuxt content v2 建立了一个博客，一切都在我的机器上运行。我跑了

npm run generate

和

npm run preview

，一切都按预期进行。问题是，当使用 netlify 时，我将构建命令设置为

npm run generate

并且站点部署并工作，但是在博客文章页面中我在刷新时遇到错误并且页面变为空白。

如果我将 netlify 构建命令设置为

npm run build

然后这不再发生但是来自 netlify 的联系表格不再有效，这是我使用

npm run generate

命令的主要原因。

请注意，当用户导航到博客文章时它确实有效，但在用户刷新的情况下一切都会中断。

错误说：

TypeError: Cannot read properties of null (reading 'author')

这只会在页面刷新时发生，它发生的原因是在刷新时有一个获取请求发送到：

/api/_content/query/bNC8phj644.1679318873303.json?_params=%7B%22where%22:%5B%7B%22_path%22:%22/blog/posts/first-blog/%22%7D%5D,%22first%22:true,%22sort%22:%5B%7B%22_file%22:1,%22$numeric%22:true%7D%5D%7D

我有点困惑为什么会发生这种情况，因为我认为运行

npm run generate

命令时它会提取数据，而我假设静态站点不再需要获取数据。

[...slug].vue

数据都在这里，但是在刷新时发送了一个提取请求，这不应该发生，因为提取应该只在构建时运行并提取数据，因为

npm run generate

正在被使用。这发生在下面的博客文章列表组件中，但在每个页面刷新时都会发送一个获取请求，但不应该有。

<script setup>
const { path } = useRoute()

const { data: blogPost } = await useAsyncData(`content-${path}`, () => {
  return queryContent().where({ _path: path }).findOne()
})
</script>

<template>
  <div class="card">
    <div class="author-name">{{ blogPost.author.firstName }}</div>
  </div>
</template>

/content/blog/posts/first-blog.md

---
author: {
  firstName: 'david'
}
---

让我感动的是，如果我们向上移动一点，我构建了一个

<BlogPostList />

组件。它里面的代码看起来是这样的。 这里一切正常，在

[...slug].vue

中，同样的事情正在做，但它在 netlify 中刷新时中断。这可能是由于动态路线吗？

<BlogPostList />

这里基本上是在做同样的事情，没有任何中断。此外，当我转到此组件并查看网络选项卡时，在页面刷新时没有发送任何提取请求。然而同样的事情并没有发生在

[...slug].vue

。这让我想知道这是某个错误还是由于路线是动态的。

<script setup>

const { data: blogPostList } = await useAsyncData('blogPostList', () => {
  return queryContent('/blog/posts').find()
})

</script>

<template>
  <div class="blog-post-container">
    <template v-for="(blogPost, index) in blogPostList" :key="index">
      <div class="post">
        <div>{{ blogPost.author.firstName }}</div>
      </div>
    </template>
  </div>
</template>