Vite+React+TS部署后刷新非首页出现404问题求助

问题根源 #

你写的自定义插件仅在**本地开发服务器（serve模式）**生效，部署到Vercel/Render的是生产构建后的静态文件，这个插件根本不会运行。而且插件逻辑只处理了根路径/，对/dashboard这类其他路由完全没做转发，自然解决不了刷新404的问题。

SPA的前端路由是在浏览器端处理的，刷新时浏览器会直接向服务器请求对应路径，但服务器上没有这些路径的物理文件，所以返回404。必须让服务器把所有非静态资源、非API的请求都转发到index.html，由前端路由接管。

解决方案 #

1. Vercel平台配置 #

在项目根目录创建vercel.json文件，添加以下内容：

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

该配置会让Vercel将所有请求转发到index.html，同时不会影响静态资源（如/assets/下的文件）和API请求的正常处理。

2. Render平台配置 #

• 若部署为静态站点：进入Render的站点设置，找到「Rewrites and Redirects」，添加一条规则：

  • Source: /*
  • Destination: /index.html
  • Action: Rewrite

• 若部署为Node.js服务（比如用Express托管静态文件），需要在服务代码中添加路由转发逻辑：

const express = require('express');
const path = require('path');
const app = express();

// 托管Vite构建后的静态资源
app.use(express.static(path.join(__dirname, 'dist')));

// 所有非API请求转发到index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(process.env.PORT || 3000);

3. Vite配置优化（可选） #

如果你的应用部署在子路径（比如https://example.com/my-app），需要在vite.config.ts中设置正确的base路径：

export default defineConfig({
  base: '/my-app/', // 根路径部署则设为'/'
  // ...其他原有配置
});

你之前的自定义插件可以直接删除，它对生产部署没有任何作用。

内容的提问来源于stack exchange，提问作者Ehab reda