Vite开发服务器部署于HAProxy后的路由配置问题求助

核心问题分析 #

你的场景里，Vite的base配置是全局公共路径，但需要同时响应多个不同前缀的路由（/collaborator/、/manager/）和资源路径（/p-app/、/public/），这和CRA仅通过PUBLIC_URL给资源加前缀的逻辑不同，导致两种配置都出问题。下面是几种可行的解决思路：

思路1：修改HAProxy路径重写（推荐，后端路由层面解决） #

直接在HAProxy的backend配置中，把/collaborator/和/manager/开头的请求路径前缀去掉，转发到Vite容器的根路径，同时保留/p-app/和/public/的路径前缀让Vite处理资源：

frontend http-in
  bind *:80
  
  # 原有其他配置
  use_backend portal_app if { path_beg -i /manager/ }
  use_backend portal_app if { path_beg -i /collaborator/ }
  use_backend portal_app if { path_beg -i /public/ }
  use_backend portal_app if { path_beg -i /p-app/ }

backend portal_app
  # 重写/manager/和/collaborator/开头的请求路径，去掉前缀
  reqrep ^([^\ ]*\ )/manager/(.*) \1/\2
  reqrep ^([^\ ]*\ )/collaborator/(.*) \1/\2
  server server1 myDockerImage:3001 check inter 1000 resolvers dockerdns resolve-prefer ipv4

然后在Vite配置中设置base: '/p-app/'：

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

export default defineConfig({
  plugins: [react()],
  base: '/p-app/'
});

这样做的好处：

• Vite只需要处理根路径的路由，前端路由（比如React Router）无需额外配置basename
• 资源路径自动带上/p-app/前缀，HAProxy会正常转发这些请求
• 完全兼容原有HAProxy的路由规则，不需要改动前端路由逻辑

思路2：Vite中间件重写请求路径（前端层面解决） #

如果不想修改HAProxy，可以在Vite中添加自定义中间件，把/collaborator/和/manager/开头的请求路径重写为根路径，同时保留base: '/p-app/'配置：

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

export default defineConfig({
  plugins: [
    react(),
    {
      name: 'rewrite-route-prefixes',
      configureServer(server) {
        server.middlewares.use((req, res, next) => {
          // 匹配/collaborator/或/manager/开头的路径，去掉前缀
          if (req.url?.match(/^\/(collaborator|manager)\//)) {
            req.url = req.url.replace(/^\/(collaborator|manager)\//, '/');
          }
          next();
        });
      }
    }
  ],
  base: '/p-app/'
});

注意事项：

• 生产环境构建后，需要确保服务器（比如Docker部署的静态文件服务）也能处理路径重写，或者直接用思路1的HAProxy配置更稳妥
• 前端路由如果使用BrowserRouter，需要确保路由规则能匹配重写后的路径（因为实际请求到Vite的是根路径的路由）

思路3：使用相对路径作为base（适合简单场景） #

把Vite的base设为相对路径./，这样资源会基于当前页面路径加载，同时确保前端路由配置正确的basename：

// vite.config.ts
export default defineConfig({
  plugins: [react()],
  base: './'
});

然后在React路由中动态设置basename（如果用React Router）：

import { BrowserRouter } from 'react-router-dom';

// 根据当前URL路径判断前缀
const getBasename = () => {
  if (window.location.pathname.startsWith('/collaborator/')) return '/collaborator';
  if (window.location.pathname.startsWith('/manager/')) return '/manager';
  return '';
};

function App() {
  return (
    <BrowserRouter basename={getBasename()}>
      {/* 路由内容 */}
    </BrowserRouter>
  );
}

这种方式的局限性：

• 资源路径会变成相对路径，比如访问/collaborator/dashboard时，资源路径是./src/index.tsx，对应服务器的/collaborator/src/index.tsx，需要确保HAProxy或服务器能正确转发这些请求到Vite
• 动态basename的逻辑需要维护，增加前端复杂度

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