Vite.js React Build 未在 Netlify 和 Vercel 上重定向

Question

我用 vite.js 做了一个 React 构建。在本地主机上进行生产和测试时，一切正常。但是，当我部署到 Netlify 或 vercel 时，无法通过直接输入 URL 来访问我使用 React-router 创建的路由，而只能通过使用应用程序内部的链接从主页（“/”）访问。

如果我单击应用程序中的路线链接，则路线正在工作，但如果我直接输入网址（例如：mypage/about），则会收到 404 错误。

我检查了 vercel 支持，他们说配置中可能缺少重定向，例如默认情况下由 create-react-app 设置的。在CRA中它看起来像这样

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

在浏览完 vite.js 文档后，我找不到任何有关如何在 vite 中设置重定向的提示。

Answer 1

这不是 vite.js 的问题，而是由于缺少 vercel 的配置文件，该文件默认添加到现有模板中。对于单页面应用程序，使用 React Router 创建的路由的 html 文件不存在，因此服务器上的某些内容需要创建重写以确保每个请求都指向“/”或index.html。在 Vercel 中，这可以通过在项目根目录中添加重写配置文件来完成，称为

vercel.json

https://vercel.com/docs/configuration 将所有路由的重写添加到指向“/”或“/index.html”的文件

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

或者

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