从CRA迁移到Vite后，public嵌套文件夹HTML路由被拦截问题求助

问题根源 #

你遇到的情况核心原因是：

• Vite默认把public目录作为静态资源根目录，public/ohif-viewer/index.html对应的访问路径是/ohif-viewer/index.html
• 当访问/ohif-viewer时，Vite没有自动映射到该目录下的index.html，反而返回了主应用的入口index.html，导致前端React Router的通配路由<Route path="*">接管请求并重定向到首页
• 其他public下的具体文件（如/xxx.png）能被Vite直接匹配到并返回静态资源，不会触发前端路由

解决方案 #

方案1：配置Vite路由重写（推荐）

在vite.config.js中添加server.rewrite规则，让访问/ohif-viewer时自动指向对应的index.html：

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

export default defineConfig({
  plugins: [react()],
  server: {
    rewrite: {
      '^/ohif-viewer$': '/ohif-viewer/index.html',
    },
  },
});

重启Vite服务后，访问/ohif-viewer会直接返回public/ohif-viewer/index.html，不会被React Router拦截。

方案2：直接访问具体文件路径

修改iframe的src为/ohif-viewer/index.html，跳过目录访问的问题，这种方式无需修改配置，简单直接。

方案3：调整React Router路由规则

如果不想修改Vite配置，可以在React Router中添加一个优先级更高的路由，排除/ohif-viewer路径：

// 路由配置中，在通配路由之前添加
<Route path="/ohif-viewer/*" element={<></>} />
// 然后是你的通配路由
<Route path="*" element={<Navigate to="/" replace />} />

注意：这种方式的前提是Vite能正确返回静态资源，如果Vite仍返回主index.html，只会渲染空组件而非ohif页面，因此不如方案1可靠。

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