部署到Netlify的Nuxt3自定义404页面不显示问题求助

问题分析 #

开发环境中error.vue能正常拦截错误并展示自定义404，但Netlify部署后显示平台自带404，核心原因是Netlify会优先对不存在的路径返回自身404页面，没有让Nuxt的路由系统接管请求。

解决方案 #

方法1：添加_redirects配置文件 #

在Nuxt项目的public目录下创建_redirects文件，写入以下内容：

/*    /index.html   200

该配置会让Netlify将所有请求转发到index.html，交由Nuxt的客户端路由处理，此时error.vue就能正常捕获404错误并展示自定义页面。

方法2：通过netlify.toml配置 #

在项目根目录创建netlify.toml文件，添加重定向规则：

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

效果和方法1一致，适合习惯用Netlify配置文件管理部署规则的场景。

方法3：确认error.vue的正确写法（可选） #

虽然开发环境正常，仍需确保error.vue正确接收错误参数：

<template>
  <div class="error-page">
    <h1 v-if="error.statusCode === 404">404 - 页面不存在</h1>
    <p>抱歉，你访问的页面无法找到</p>
  </div>
</template>

<script setup>
const props = defineProps({
  error: {
    type: Object,
    required: true
  }
})
</script>

额外注意事项 #

• 部署时使用正确的构建命令：对于Nuxt3，推荐使用nuxi generate生成静态站点，或nuxi build && nuxi generate（根据项目配置调整）。
• 部署后可在Netlify控制台的「部署」页面查看日志，确认配置文件是否被正确识别。

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