Vue history 模式下路由刷新 404
内容提要
博主在使用 Vue 的 history 模式时遇到路由刷新导致 404 错误。解决方案是为服务器配置伪静态规则：在 nginx 配置文件中添加特定规则，或在 Apache 的 .htaccess 文件中设置重写规则。此外，在 Vercel 部署时，可以通过创建 vercel.json 文件将所有路由请求重定向到 index.html，以便由 Vue 路由处理。
延伸解读
理解 Vue 的 history 模式
Vue 的 history 模式允许使用更简洁的 URL，但在服务器上配置不当时会导致 404 错误。了解这一点对于开发者在部署应用时至关重要，确保服务器能够正确处理路由请求，避免用户体验受损。
服务器配置的重要性
在使用 Vue 的 history 模式时，服务器的配置至关重要。无论是 nginx 还是 Apache，正确的伪静态规则能够确保路由请求被正确重定向到 index.html，从而避免 404 错误。
Vercel 部署的注意事项
在 Vercel 部署 Vue 应用时，需创建 vercel.json 文件以处理路由重定向。这一配置确保所有请求都能被 Vue 路由处理，避免因路由刷新而导致的错误。
Q&A
Vue 的 history 模式是什么？
Vue 的 history 模式是一种路由模式，使得路由路径看起来更干净，类似于 url/path，而不是 url/#/path。
为什么在使用 Vue history 模式时会出现 404 错误？
在使用 Vue history 模式时，刷新页面会导致服务器无法找到对应的路由，从而返回 404 错误。
如何在 nginx 中解决 Vue history 模式下的 404 错误？
在 nginx 配置文件中添加规则：location / { try_files $uri $uri/ /index.html; }。
Apache 服务器如何处理 Vue history 模式的 404 错误？
在 Apache 的 .htaccess 文件中设置重写规则，确保所有请求都重定向到 index.html。
在 Vercel 部署时如何处理 Vue history 模式的路由？
在 public 目录下创建 vercel.json 文件，内容为 { "rewrites": [{ "source": "/:path*", "destination": "/index.html" }] }。
为什么本地开发环境下不会出现 404 错误？
因为 vue-cli 默认开启了 historyApiFallback 配置，能够在访问不存在的路由时返回 index.html。
