Nuxt3自定义Error页面不渲染，始终显示默认页面（Vue3、Vite）

核心问题分析 #

你的自定义error.vue不生效，主要源于错误页面作用范围混淆和文件位置/代码写法不符合Nuxt3规则，结合你的配置和代码，具体解决步骤如下：

1. 确认error.vue的正确位置 #

由于你在nuxt.config中设置了srcDir: "src/"，error.vue必须放在src/根目录下，与app.vue同级，不能放在pages/文件夹内。

2. 区分两种错误场景的处理方式 #

场景1：处理应用内运行时错误（如手动抛出createError） #

你的error.vue可以保留Options API写法，也可以改用Nuxt3更适配的Composition API，确保正确获取错误信息：

<template>
  <div>
    <h1>Dang</h1>
    <p>
      <strong>{{ error.message }}</strong>
    </p>
    <p>It looks like something broke.</p>
    <p>Sorry about that.</p>
    <button @click="clearError({ redirect: '/' })">返回首页</button>
  </div>
</template>

<script setup>
const error = useError()
</script>

同时确保插件或页面中错误抛出方式正确，比如plugins/error-handler.js中：

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.hook('vue:error', (err) => {
    createError({
      statusCode: 500,
      message: err.message || '未知错误'
    })
  })
})

场景2：处理404页面（访问不存在的路由） #

Nuxt3中error.vue不负责处理404路由，需要在pages/目录下创建Catch All路由文件[...notfound].vue，示例代码：

<template>
  <div>
    <h1>404 - 页面不存在</h1>
    <p>抱歉，你访问的页面不存在</p>
    <NuxtLink to="/">返回首页</NuxtLink>
  </div>
</template>

<script setup>
useHead({ title: '404 - 页面不存在' })
</script>

3. 额外检查项 #

• 开发模式下Nuxt可能显示带调试信息的默认错误页，建议打包后在生产模式下测试自定义页面是否生效。
• 你的nuxt.config当前配置无禁用错误处理的相关项，无需调整。

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