如何为Nuxt页面设置404响应状态？多种尝试未解决

我想给我的Nuxt项目中的/not-found页面设置404响应状态码，但尝试了多种方法都没成功：

• 在~/error.vue中创建自定义错误页面并使用createError抛出致命错误，返回的状态码始终是200；
• 抛出致命错误并使用NuxtErrorBoundary组件，没有任何效果；
• 在组件的setup函数中使用setResponseStatus：

const event = useRequestEvent()
setResponseStatus(event, 404)
setResponseStatus(event, 404, 'Page Not Found')

但这个方法必须在服务器端执行，在setup中并非总能生效；

• 在~/server/middleware中使用中间件：

// setResponseStatus在部分~/server/*文件中未定义，因此需从如下路径导入
import { setResponseStatus } from '../../node_modules/nuxt/dist/app'

export default defineEventHandler((event) => {
  setResponseStatus(event, 404)
})

要么没有效果，要么触发nuxt instance unavailable错误。

我是不是遗漏了什么？目前考虑改用nginx来处理404问题，但觉得不该这么复杂。

正确解决方案（Nuxt 3） #

方法1：使用app/not-found.vue并限定服务端执行状态码设置 #

Nuxt 3专门提供了~/app/not-found.vue用于处理404场景，服务端渲染该页面时默认会返回404状态码。若需兼容客户端路由跳转的情况，可在组件中明确限定仅在服务端设置状态码：

<template>
  <div>
    <h1>404 - 页面未找到</h1>
  </div>
</template>

<script setup>
const event = useRequestEvent()
if (process.server) {
  setResponseStatus(event, 404, 'Page Not Found')
}
</script>

方法2：精准匹配路径的服务器中间件 #

不要全局设置404，而是在服务器中间件中精准匹配/not-found路径，同时正确导入依赖：

// ~/server/middleware/404.ts
import { setResponseStatus } from 'h3'

export default defineEventHandler((event) => {
  if (event.path === '/not-found') {
    setResponseStatus(event, 404)
  }
})

setResponseStatus是h3库的原生方法，直接从h3导入即可，无需从Nuxt的dist目录导入——这是你之前中间件方法出错的核心原因。

方法3：页面内触发404时指定状态码 #

如果是在动态路由或页面组件中判断资源不存在，直接用createError指定状态码，Nuxt会自动渲染错误页面并返回对应状态：

// 页面组件的setup逻辑
const data = await fetchTargetData()
if (!data) {
  throw createError({
    statusCode: 404,
    statusMessage: 'Page Not Found',
    message: '请求的页面不存在'
  })
}

你之前方法的问题分析 #

1. 错误使用error.vue：error.vue是全局通用错误页面，而not-found.vue是Nuxt为404场景专门设计的页面，后者自带状态码处理逻辑；
2. 依赖导入错误：服务器端代码中setResponseStatus应从h3导入，而非Nuxt的dist目录，否则会导致实例上下文异常；
3. 未限定执行环境：useRequestEvent在客户端环境返回undefined，必须用process.server确保状态码设置逻辑仅在服务端执行。

内容的提问来源于stack exchange，提问作者Ришат Ризванов