Nuxt3 SSR组件内asyncData后服务端返回404页面问题

在Nuxt3 SSR场景下，你需要用createError替代showError来触发服务端404响应和错误页面渲染，具体操作如下：

1. 在页面组件中抛出createError #

在pages/[...slugs.vue]的useAsyncData逻辑里，当接口返回空数据或请求失败时，直接抛出Nuxt内置的createError对象，而不是调用showError：

<script setup>
const route = useRoute()

const { data: pageData } = await useAsyncData('pageContent', async () => {
  // 替换成你的接口请求逻辑
  const response = await fetch(`/api/get-page/${route.params.slugs.join('/')}`)
  
  // 处理接口请求失败的情况
  if (!response.ok) {
    throw createError({
      statusCode: 404,
      statusMessage: 'Page Not Found',
      message: '请求的页面不存在'
    })
  }

  const data = await response.json()
  // 处理接口返回空数据的情况
  if (!data) {
    throw createError({
      statusCode: 404,
      statusMessage: 'Page Not Found',
      message: '页面无内容'
    })
  }

  return data
})
</script>

2. 确保根目录存在error.vue错误页面 #

Nuxt3会自动识别根目录下的error.vue作为全局错误页面，组件需要接收error props来展示错误信息：

<!-- error.vue -->
<template>
  <div class="error-page">
    <h1>{{ error.statusCode }} - {{ error.statusMessage }}</h1>
    <p>{{ error.message }}</p>
  </div>
</template>

<script setup>
const props = defineProps({
  error: {
    type: Object,
    required: true
  }
})
</script>

关键说明 #

• showError仅适用于客户端的错误提示，无法在SSR的asyncData阶段触发服务端的错误页面渲染和HTTP状态码设置。
• 抛出createError后，Nuxt的服务端渲染流程会直接中断当前页面渲染，转而渲染error.vue，同时向客户端返回对应的404 HTTP状态码。
• 不需要额外导入createError，它是Nuxt3内置的全局工具函数。

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