时间戳

首页 > 解决方案 > Vite.js React 构建不会在 Netlify 和 Vercel 上重定向

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

问题描述

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

如果我单击应用程序中的路由链接，则该路由正在运行，但如果我直接输入 URL（例如：mypage/about），则会收到 404 错误。

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

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

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

标签： reactjsreact-routernetlifyvercelvite

解决方案

这不是 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" }]
}

推荐阅读