Nuxt 3 中全局错误处理为啥不生效？

UI新红提问于 2026-03-25 21:46:20 阅读 9

框架

我在 Nuxt 3 项目里写了 error.vue 页面，也配置了 app.vue 里的 onErrorCaptured，但页面报错时还是直接白屏，没走我的错误处理逻辑，这是为啥？

我试过在 pages/error.vue 里写组件，也试过在 plugins 里加 errorHandler，但好像都没触发。比如下面这个异步请求出错：

const { data } = await useFetch('/api/fake-endpoint')

控制台报 404 错误，但 error.vue 根本没显示，是我漏了什么配置吗？

我来解答赞 2 收藏

反馈

1 条解答

上官瑞玲 Lv1

我之前也碰到过这个问题，Nuxt 3 的错误处理确实有点小坑。首先确认一下你的 error.vue 放在了 pages 文件夹下面，并且命名是小写的 error.vue。

关键点是 Nuxt 3 的错误处理机制变了，现在推荐直接用 nuxt.config.js 来配置：

export default defineNuxtConfig({

  app: {

    errorHandler(error, vm, info) {

      console.error('Custom error handler', error)

      // 这里可以写自定义逻辑

    }

  }

})

另外 useFetch 需要这样用才能触发全局错误处理：

const { data, error } = await useFetch('/api/fake-endpoint', {

  baseURL: 'https://your-api-domain.com',

  pick: ['fieldYouNeed'],

  onResponseError({ response }) {

    console.log('Fetch error:', response._data)

  }

})

记得把 baseURL 设置正确，不然可能会因为跨域问题直接抛出未经处理的错误。这几个地方检查完应该就能正常走 error.vue 了，我当时就是这么解决的。

2026-03-25 23:05