在VERCEL和NETLIFY部署应用后刷新页面出现404错误求助

问题根源 #

单页应用（如React/Vue/Angular）采用客户端路由机制，刷新页面时服务器会尝试匹配对应路径的静态资源，但SPA仅存在一个入口文件（通常为index.html），因此服务器返回404错误。

针对Netlify的解决方案 #

方法1：添加_redirects文件 #

在项目根目录创建_redirects文件，写入以下规则：

/*    /index.html   200

注意将该文件放在打包工具会识别的静态资源目录（比如React的public文件夹、Vue的public目录），确保部署时能被包含进输出包。

方法2：配置netlify.toml #

在项目根目录创建或修改netlify.toml，添加路由重写配置：

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

针对Vercel的解决方案 #

在项目根目录创建vercel.json文件，添加重写规则：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

排查要点（若之前方案无效） #

• 确认配置文件（_redirects/netlify.toml/vercel.json）位于项目根目录，且未被.gitignore或打包工具排除。
• 检查配置语法：比如_redirects需用空格分隔字段、vercel.json需保证JSON格式无语法错误。
• 查看平台部署日志，确认配置文件被正确识别（Netlify日志会显示重写规则加载信息，Vercel会提示rewrites已生效）。

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