Nuxt 3中抛出createError无法跳转至自定义error.vue页面咨询

一、让自定义~/error.vue生效的关键操作 #

你的自定义错误页没触发，大概率是这几个原因导致的，对应调整即可：

1. 确认文件位置：确保error.vue放在项目根目录（不能放在pages、server这类子文件夹里），Nuxt只会自动识别根目录下的这个组件作为全局错误页。
2. 修改错误抛出逻辑：在server中间件抛出错误时，添加fatal: true属性，强制触发全局错误页渲染：

// ~/server/middleware/auth/auth.ts
export default defineEventHandler(async (event) => {
  if(conditionNotMet){
    throw createError({
      statusCode: 404,
      name: 'NotFoundError',
      message: 'Todo not found',
      statusMessage: "Not Found",
      fatal: true // 新增该属性
    })
  }
})

3. 重启开发服务：如果是在开发环境，重启Nuxt服务，确保新添加的error.vue被正确识别加载。

二、在默认错误页调用clearError()的方法 #

如果暂时无法切换到自定义错误页，可通过以下方式给默认错误页添加清除错误的按钮：
创建一个全局插件，通过DOM操作注入按钮逻辑：

// ~/plugins/error-handler.ts
export default defineNuxtPlugin(() => {
  const error = useError()

  if (error.value) {
    setTimeout(() => {
      const errorPage = document.querySelector('.nuxt-error-page')
      if (errorPage) {
        const clearBtn = document.createElement('button')
        clearBtn.textContent = '清除错误并返回'
        clearBtn.style.marginTop = '1rem'
        clearBtn.addEventListener('click', () => {
          clearError({ redirect: '/' }) // 清除错误后跳转到首页，可自定义跳转路径
        })
        errorPage.appendChild(clearBtn)
      }
    }, 0)
  }
})

插件放在plugins文件夹下会被Nuxt自动加载，无需额外配置。

三、Nuxt错误处理文档核心要点（中文翻译） #

Nuxt提供多层错误处理机制：

1. 全局错误页：在项目根目录创建error.vue组件，会自动替换默认错误页，该组件接收error props，包含错误的详细信息。
2. 组合式API：使用useError()获取当前错误状态，clearError()可清除错误并可选跳转到指定页面。
3. 服务端错误处理：在server路由或中间件中抛出的createError错误，会被Nuxt捕获并传递到客户端的错误处理流程。
4. 自定义错误页扩展：error.vue可根据错误状态码、类型等渲染不同内容，比如针对404、500错误展示差异化UI。

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