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" }]
}

Answer 2

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

将其放入 _redirects 文件中

/* /index.html 200

链接在这里 - 如果您想查看项目结构，那就是链接

Answer 3

下面的代码片段对我有用。您只需在 public 文件夹中创建

_redirects

即可。

/* /index.html 200

感谢@Zayne komichi