如何在NuxtJS 3中实现自定义错误页面？

Nuxt 3 的自定义错误页配置相比 Nuxt 2 有较大调整，原layouts/error.vue的方案已经失效，正确配置方式如下：

全局错误页配置（适配全场景错误，包括404、服务端渲染错误） #

直接在项目根目录（和app.vue、nuxt.config.ts同级）新建error.vue文件即可，该文件会自动作为全局兜底错误页生效。
基础示例代码：

<script setup>
// 获取错误实例
const error = useError()
// 清除错误的方法，可配置跳转路径
const handleClearError = () => {
  clearError({ redirect: '/' })
}
</script>

<template>
  <div class="error-page">
    <h2>访问出错了</h2>
    <p v-if="error.statusCode === 404">您访问的页面不存在</p>
    <p v-else>服务器错误：{{ error.message }}</p>
    <button @click="handleClearError">返回首页</button>
  </div>
</template>

单布局自定义错误页配置 #

如果需要给不同布局配置独立的错误页，可以在对应布局文件中用<NuxtErrorBoundary>组件包裹<NuxtPage />，通过插槽自定义错误展示内容：

<template>
  <div class="default-layout">
    <!-- 公共头部 -->
    <Header />
    <NuxtErrorBoundary>
      <!-- 正常渲染的页面内容 -->
      <template #default>
        <NuxtPage />
      </template>
      <!-- 错误时渲染的内容 -->
      <template #error="{ error, clearError }">
        <div class="layout-error">
          <p>当前页面加载失败：{{ error.message }}</p>
          <button @click="clearError">重新加载</button>
        </div>
      </template>
    </NuxtErrorBoundary>
    <!-- 公共底部 -->
    <Footer />
  </div>
</template>

注意事项 #

• 根目录的error.vue优先级低于布局内的<NuxtErrorBoundary>，未被局部捕获的错误才会走全局错误页逻辑
• 不需要在nuxt.config.ts中额外注册错误页，根目录的error.vue会被自动识别
• 测试404效果时，需确保没有自定义路由规则覆盖默认的404匹配逻辑

内容的提问来源于stack exchange，提问作者sporadic-urchin