本文旨在解决netlify部署单页应用（spa）时，除`index.html`外其他页面显示“page not found”的问题。通过配置`netlify.toml`文件中的重写规则，确保所有url请求都指向`index.html`，从而允许客户端路由正常工作，彻底消除由前端路由引起的404错误。
在开发单页应用（SPA）时，我们通常会使用诸如react、vue或angular等框架，并通过vite、webpack等工具进行构建。这类应用的核心特点是采用客户端路由（Client-Side Routing）。这意味着，当用户在应用内部点击链接导航到不同页面时，浏览器并不会向服务器发起新的页面请求，而是由javaScript代码截获URL变化，并动态地更新页面内容，同时修改浏览器历史记录中的URL。
理解问题根源：静态托管与客户端路由的冲突
当我们将一个SPA部署到Netlify这样的静态网站托管平台时，问题就可能浮现。Netlify默认的行为是根据请求的URL路径去查找对应的静态文件。例如，如果用户请求/about，Netlify会尝试在部署目录中找到一个名为about.html或about/index.html的文件。
然而，在SPA中，像/about这样的路径并不对应一个独立的HTML文件，它只是客户端路由器识别的一个内部路径。所有的前端代码都打包在index.html及其引用的javascript文件中。因此，当用户直接访问yourdomain.com/about或者刷新该页面时，Netlify找不到/about对应的静态文件，便会返回“Page not found”的404错误。而从index.html内部点击链接跳转则没有问题，因为此时JavaScript路由器已经加载并开始工作。
解决方案：配置Netlify重写规则
为了解决这一问题，我们需要告诉Netlify：对于任何找不到对应静态文件的请求，都应该将它们重写（rewrite）到index.html。这样，index.html及其包含的JavaScript代码就会被加载，客户端路由器便能接管URL，并根据路径渲染正确的组件。
Netlify提供了两种方式来配置重写规则：
- _redirects文件：一个位于项目发布目录根下的纯文本文件。
- netlify.toml文件：一个功能更强大、更灵活的配置文件，通常放置在项目根目录。
对于SPA，推荐使用netlify.toml文件，因为它能更好地组织构建命令、环境变量和重写规则等配置。
netlify.toml配置详解
在项目根目录下创建或修改netlify.toml文件，并添加以下内容：
[build] # 指定构建命令，例如使用Vite构建项目 command = "vite build" # 指定构建产物（静态文件）的发布目录，例如Vite默认是dist publish = "dist" [[redirects]] # 'from' 指定要匹配的请求路径模式 # "/*" 表示匹配所有路径，包括根路径和所有子路径 from = "/*" # 'to' 指定重写的目标路径 # "/index.html" 表示将所有匹配的请求重写到项目的index.html文件 to = "/index.html" # 'status' 指定重写操作的http状态码 # 200 表示这是一个内部重写（rewrite），而不是外部重定向（redirect）。 # 浏览器地址栏的URL不会改变，用户也感知不到重写操作， # 但Netlify服务器会返回index.html的内容。 status = 200
配置说明：
-
[build] 部分：
-
[[redirects]] 部分：
- 这是一个数组，允许定义多个重写/重定向规则。
- from = “/*”: 这是一个通配符规则，表示匹配任何传入的URL路径。*会匹配任何字符序列，包括空字符串。
- to = “/index.html”: 指定了所有匹配from规则的请求都应该被重写到index.html文件。
- status = 200: 这是关键。它告诉Netlify执行一个内部重写操作，而不是一个HTTP重定向。这意味着服务器会返回index.html的内容，但浏览器地址栏的URL会保持不变。用户会看到他们请求的URL，但实际上是index.html在处理。
部署与验证
完成netlify.toml配置后，将更改提交到你的版本控制系统（如git），并推送到与Netlify连接的代码仓库。Netlify会自动检测到netlify.toml文件并应用这些规则。
部署成功后，你可以尝试以下方式验证：
- 直接在浏览器中输入你的SPA内部路径，例如yourdomain.com/about。
- 在SPA内部导航到其他页面，然后刷新浏览器。
在这两种情况下，页面都应该能正常加载，不再显示“Page not found”错误。
注意事项与最佳实践
- 缓存问题：如果之前访问过404页面，浏览器可能会缓存该响应。在验证时，尝试清除浏览器缓存或使用无痕模式。
- 其他重定向需求：如果你的应用有其他特定的重定向需求（例如，旧URL到新URL的301重定向），你可以在[[redirects]]数组中添加更多规则。Netlify会按照它们在文件中出现的顺序处理规则。
- _redirects文件：如果你不想使用netlify.toml，也可以在你的发布目录（例如dist或build）中创建一个名为_redirects的文件，内容如下：
/* /index.html 200
但netlify.toml提供了更集中的配置管理能力。
- 非SPA项目：此重写规则仅适用于单页应用。对于多页应用或纯静态网站，不应使用此规则，因为它会导致所有路径都返回index.html。
通过上述netlify.toml配置，你的Netlify单页应用将能够正确处理客户端路由，提供流畅的用户体验，并彻底解决因前端路由导致的“Page not found”问题。