能否在Nuxt静态目标模式下用SPA处理动态页面404问题？

• 保留target: 'static'以维持预生成页面的优势，核心配置调整为：

  export default {
    target: 'static',
    generate: {
      fallback: true, // 生成404.html作为未预生成路由的 fallback
      // 可选：预生成已知的动态页面（比如从API拉取已存在的page ID）
      routes: async () => {
        const res = await fetch('你的API地址/pages')
        const pages = await res.json()
        return pages.map(page => `/page/${page.id}`)
      }
    }
  }
  

• 自定义pages/404.vue，在页面内处理动态路由的客户端渲染逻辑：

  <template>
    <div v-if="pageData">
      <h1>{{ pageData.title }}</h1>
      <div>{{ pageData.content }}</div>
    </div>
    <div v-else>
      <h1>404 - 页面不存在</h1>
    </div>
  </template>
  
  <script>
  export default {
    async mounted() {
      const routeMatch = this.$route.path.match(/^\/page\/(\w+)$/)
      if (routeMatch) {
        const pageId = routeMatch[1]
        // 调用API获取运行时创建的页面数据
        const res = await this.$axios.get(`/api/pages/${pageId}`)
        this.pageData = res.data
      }
    },
    data() {
      return {
        pageData: null
      }
    }
  }
  </script>
  

• 原理说明：
  当用户访问未预生成的/page/:id路由时，静态站点会返回404页面，此时在404页面中通过$route识别路由格式，调用API获取数据后在客户端渲染内容，实现类似SPA的动态加载效果。

• 你之前配置target: 'server'会直接切换为服务端渲染模式，丢失静态预生成的优势，没必要这么做。

内容的提问来源于stack exchange，提问作者d-_-b