生产环境下Vite+React动态路由无法访问的原因咨询

核心原因 #

你遇到的是单页应用(SPA)前端路由的典型问题：

• 本地开发时，Vite的开发服务器会自动处理所有路由请求，访问/deeplink/detail-article这类子路由时，服务器会返回index.html，由前端React Router解析路由并渲染对应组件。
• 生产环境的服务器默认会把/deeplink/detail-article当作物理文件路径去查找，但你的项目里根本没有这个路径的文件，所以返回404。

解决办法 #

需要配置生产服务器，让所有找不到对应物理文件的请求都回退到index.html，这样前端路由才能正常工作。以下是几种常见服务器的配置方式：

Nginx配置 #

在你的Nginx站点配置的server块中添加以下规则：

location / {
  try_files $uri $uri/ /index.html;
}

Apache配置 #

在项目根目录创建.htaccess文件，写入以下内容：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

其他平台（如Netlify/Vercel） #

• Netlify：在项目根目录创建_redirects文件，内容为/* /index.html 200
• Vercel：在vercel.json中添加配置：

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

额外检查点 #

确认你的vite.config.mjs中base配置是否正确：如果你的项目部署在域名根路径下（比如你的https://pemol.tdbangarna.com/），当前base: '/'是正确的；如果部署在子路径下，需要改成对应的子路径（比如base: '/dashboard/'）。

内容的提问来源于stack exchange，提问作者Ganda Rain Panjaitan