Vite server.base配置未生效，反向代理下资源路径异常求助

关于server.base的用途 #

server.base的作用是让Vite开发服务器自身监听在指定的子路径下，比如配置server.base: "/react/"后，你需要直接访问http://localhost:1234/react/才能加载服务。它并不负责适配反向代理的外部访问前缀，所以你的场景下这个配置完全不适用，这也是为什么你改了之后没效果的原因。

正确的解决方法 #

1. 调整Vite配置 #

针对反向代理场景，需要用server.origin（开发环境）和base（生产构建）来配置：

// vite.config.js
export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    port: 1234,
    // 指定外部访问的完整前缀，Vite会基于这个生成资源请求路径
    origin: 'http://localhost/react/'
  },
  // 生产构建时，设置资源的基础路径前缀，确保打包后的资源都带/react/前缀
  base: '/react/'
})

• server.origin：告诉Vite开发服务器，外部用户访问它的URL前缀是http://localhost/react/，这样生成的@vite/client等资源链接会自动带上/react/前缀。
• base：生产构建时生效，确保打包后的静态资源路径都以/react/开头，适配反向代理的路径。

2. 确保反向代理配置正确 #

以Nginx为例，反向代理配置需要正确转发路径并传递必要请求头：

location /react/ {
  # 将请求转发到Vite服务，注意末尾的/，会把/react/后面的路径拼接到1234端口的路径上
  proxy_pass http://localhost:1234/;
  # 传递Host头，让Vite识别外部访问的域名
  proxy_set_header Host $host;
  # 传递前缀信息，部分工具依赖这个头识别路径
  proxy_set_header X-Forwarded-Prefix /react/;
}

如果是Docker Compose中的反向代理（比如Traefik、Nginx服务），需确保路径重写规则正确：将/react/*的请求转发到Vite服务的/*路径。

3. 验证效果 #

重启Vite服务和反向代理后，刷新页面查看网络请求，@vite/client等资源的请求路径应该变成http://localhost/react/@vite/client，不再出现404。

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