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

Question

我用 vite.js 做了一个反应构建。在本地主机上构建生产和测试时一切正常。但是当我部署到 Netlify 或我用 react-router 创建的 vercel 路由时，不能通过直接输入它们的 url 来访问，而只能通过使用里面的 links 从主页（'/'）访问应用程序。

如果我在应用程序中单击路由 link，该路由正在运行，但如果我直接输入 url（例如：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" }]
}

Answer 2

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

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

Vite.js React Build Not Redirecting On Netlify And Vercel

reactjs

react-router

netlify

vercel

vite