Nuxt 3静态站点子路由请求_payload.json路径错误致404

问题原因 #

这种情况通常出现在嵌套动态路由场景下，Nuxt静态生成时没有正确计算子路由的基础路径，导致资源请求路径丢失了父路由的动态段（[slug]部分）。另外你配置的character analysis路由包含空格，这本身不符合Nuxt路由规则，也会引发路由识别和生成异常。

解决步骤 #

• 修正路由命名与目录结构
  Nuxt路由不支持空格，把带空格的路由character analysis改为character-analysis（连字符）或character_analysis（下划线），同时对应的页面文件也要重命名，确保目录结构为：

  pages/
  └── books/
      └── [slug]/
          ├── summary.vue
          ├── character-analysis.vue
          └── quotes.vue
  

• 确保预生成所有动态路由
  在nuxt.config.ts中配置generate.routes，手动生成所有包含动态slug的子路由，避免Nuxt遗漏路径：

  export default defineNuxtConfig({
    generate: {
      routes: async () => {
        // 示例：从API获取所有书籍的slug
        const res = await fetch('https://your-api-url/books')
        const books = await res.json()
        // 为每个书籍生成三个子路由
        return books.flatMap(book => [
          `/books/${book.slug}/summary`,
          `/books/${book.slug}/character-analysis`,
          `/books/${book.slug}/quotes`
        ])
      }
    }
  })
  

• 避免手动使用相对路径请求资源
  不要在组件中手动构造payload的相对路径，让Nuxt自动处理资源加载。如果必须手动请求，基于当前路由的完整路径构建：

  <script setup>
  const route = useRoute()
  // 基于当前路由完整路径构造正确的payload地址
  const payloadUrl = `/${route.fullPath}/_payload.json`
  </script>
  

• 清理缓存重新生成
  清除Nuxt缓存后重新执行生成命令，避免旧缓存文件干扰：

  yarn clean
  yarn generate
  

• 升级Nuxt到最新稳定版
  旧版本Nuxt可能存在嵌套动态路由静态生成的bug，执行升级命令修复已知问题：

  yarn upgrade nuxt
  

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