Vercel部署项目后自定义NotFound/404页面无法显示的解决方案咨询

先按框架规则调整文件路径（最省心的方案） #

• 若使用Next.js Pages Router：把自定义404页面重命名为404.jsx，放到pages目录下（比如src/pages/404.jsx），Vercel会自动识别这个默认路径，无需额外配置vercel.json。你之前放在NotFound子目录不符合框架默认规则，改完路径重新部署即可。
• 若使用Next.js App Router：在app目录下创建not-found.jsx，平台会自动加载该页面作为404页面。
• 其他静态框架（纯React、Vue等）：确保编译后的自定义404页面为404.html，放在项目输出目录（如build、dist）的根目录，Vercel会优先使用这个文件而非默认页面。

需保留自定义路径？修正vercel.json配置 #

如果不想修改文件路径，试试以下正确配置，注意dest要填写编译后的文件路径，而非源码路径：

{
  "routes": [
    { "handle": "filesystem" },
    {
      "src": "/.*",
      "status": 404,
      "dest": "/编译后的404文件路径（比如/NotFound.html）"
    }
  ]
}

比如React项目编译后，NotFound.jsx会生成NotFound.html在build目录中，此时dest就写/NotFound.html。

最后排查缓存与部署设置 #

• 部署时在Vercel控制台点击「重新部署」，不要勾选「使用现有构建缓存」，强制重新构建以避免旧配置被缓存。
• 检查项目「设置」-「构建与开发设置」，确认「输出目录」填写的是项目正确的编译目录（如Next.js为.next，静态项目为build），确保自定义404页面在该目录内。

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