React/Vite项目npm run start后动态路由页面404问题求助

你遇到的是单页应用（SPA）客户端路由的典型问题：开发环境下Vite内置服务器会自动处理所有路由请求，转发到index.html；但生产环境用serve静态服务器时，它只会查找对应路径的物理文件，像/redefinir-senha/code这种动态路由没有对应的文件，所以返回404。

以下是两种直接解决的方案：

方案1：修改serve启动参数 #

直接在package.json的start脚本中给serve添加--single参数，强制服务器把所有未匹配到文件的请求都转发到index.html：

"scripts": {
    "start": "vite build && serve dist --single",
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
}

方案2：配置Vite的路由 fallback（推荐） #

在项目根目录的vite.config.js（或vite.config.ts）中添加historyApiFallback配置，同时确保构建输出正确：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  // 开发环境路由 fallback
  server: {
    historyApiFallback: true
  },
  // 预览环境路由 fallback
  preview: {
    historyApiFallback: true
  },
  build: {
    rollupOptions: {
      output: {
        // 避免代码分割导致的路径问题（可选，根据项目情况调整）
        manualChunks: undefined
      }
    }
  }
})

这个配置会让Vite在开发、预览和构建阶段都处理SPA路由的跳转逻辑，确保所有路由请求都指向index.html。

如果后续切换到其他生产服务器（如Nginx、Apache），也需要对应配置路由 fallback：

• Nginx：在站点配置中添加try_files $uri $uri/ /index.html;
• Apache：在项目根目录的.htaccess中添加RewriteRule ^ index.html [L]

内容的提问来源于stack exchange，提问作者Danielson Silva