如何禁用Nuxt内置错误处理？解决生产环境自定义错误页冲突

Nuxt 3 实现方式 #

• 自定义全局错误组件覆盖默认提示
  在项目根目录创建 ~/error.vue 文件，直接留空或仅保留自定义内容，替代Nuxt默认错误组件：

  <template>
    <!-- 此处留空，Nuxt默认错误提示将不再显示 -->
  </template>
  
  <script setup>
  // 如需自定义逻辑可在此添加，否则保持空即可
  </script>
  

• 配置Nuxt跳过错误处理逻辑
  在 nuxt.config.ts 中添加以下配置，阻止Nuxt执行默认错误处理：

  export default defineNuxtConfig({
    app: {
      errorHandler: () => {} // 空函数拦截默认错误处理
    },
    debug: false, // 关闭生产环境错误栈输出
    nitro: {
      errorHandler: (error, { response }) => {
        response.statusCode = error.statusCode || 500
        response.end() // 终止响应，让Nginx接管错误页跳转
      }
    }
  })
  

Nuxt 2 实现方式 #

• 替换默认错误布局页面
  在项目根目录创建 ~/layouts/error.vue 文件，内容留空以覆盖默认错误页：

  <template>
    <!-- 无内容，屏蔽Nuxt默认错误提示 -->
  </template>
  
  <script>
  export default {
    props: ['error'] // 接收错误参数但不做处理
  }
  </script>
  

• 修改Nuxt配置禁用错误渲染
  在 nuxt.config.js 中配置关闭默认错误页渲染：

  export default {
    render: {
      error: {
        page: false // 禁用默认错误页面
      }
    },
    logger: {
      level: 'warn' // 关闭生产环境错误日志输出
    }
  }
  

配合Nginx的关键配置 #

确保Nginx开启错误响应拦截，触发自定义错误页跳转：

server {
  # 其他基础配置...

  error_page 404 500 502 503 504 /custom-error.html;
  location = /custom-error.html {
    root /path/to/your/static/resources;
    internal;
  }

  location / {
    proxy_pass http://your-nuxt-service-address;
    proxy_set_header Host $host;
    proxy_intercept_errors on; # 开启拦截，让Nginx接管错误响应
  }
}

以上配置可彻底禁用Nuxt内置错误处理，确保Nginx自定义错误页单独显示，不会出现默认提示与自定义页面混合的问题。

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