Netlify部署vue/react项目，在页面刷新时呈现404解决办法

Netlify 是一个静态网站托管平台，它非常适合用于托管使用 React 和其他前端框架构建的单页应用程序（SPA）。React Router 是 React 的路由库，用于在 SPA 中管理不同页面的导航。

问题描述

在使用 React 或者Vue 构建的项目中，当用户刷新页面时，可能会遇到 404 错误。这是因为 Netlify 默认情况下不知道如何处理前端路由，导致无法找到对应的资源。

原因分析

前端路由与服务器路由的区别：在 SPA 中，所有的路由都是由前端 JavaScript 处理的，而不是由服务器处理。当用户刷新页面时，浏览器会向服务器请求对应的资源，而服务器并不知道这个资源是由前端路由处理的，因此返回 404 错误。

Netlify 的默认行为：Netlify 默认情况下会将所有请求都指向 index.html 文件，但如果没有正确配置，服务器可能无法正确处理前端路由。

于是，要做的事情就是： 告诉Netlify, 管它三七二十一，不管访问什么路径你都给我返回index.html——即，让js代码先下到用户的浏览器上，让它去处理该显示什么。

解决办法

在项目根目录创建文件netlify.toml，内容如下：

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

到netlify看一下部署的进度，等部署完成后就可以看到效果来，刷新就不是404了：

再次刷新就好了：

例如我的网站：