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

Question

我用vite.js进行了react构建。在本地主机上进行生产和测试时，一切都很正常。但是，当我部署到Netlify或vercel时，我使用react路由器创建的路由无法通过直接输入它们的url来访问，只能通过使用应用程序内部的链接从主页("/"(访问。

如果我点击应用程序中的路由链接，路由正在工作，但如果我直接输入url(例如：mypage/about(，我会收到404错误。

我联系了vercel支持，他们说配置中可能缺少重定向，例如默认情况下通过create-react应用程序进行设置。在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" }]
}

Answer 2

如果您正在使用vite创建一个名为public的文件夹，并向其中添加名为_redirects的文件，对于其他bundler，只需将_redirects文件添加到公用文件夹

将其放入_redirects文件中

/* /index.html 200

链接在这里-这是链接，如果你想看到项目结构