如何为Vite配置不同Base URL，解决开发环境资源路径映射异常

你的核心需求是在开发阶段让所有根路径（/开头）的资源请求指向Node后端服务，但当前配置未生效，原因是base和server.origin的用法不符合你的场景：

• base是生产环境的公共基础路径，开发环境设置它不会影响资源请求逻辑，反而可能干扰HMR功能；
• server.origin主要用于SSR场景生成外部可访问的资源URL，不是用来转发请求的。

以下是两种可行的解决方案：

方案1：使用Vite代理转发指定请求 #

通过server.proxy配置，将非Vite内部的根路径请求全部转发到后端，同时保留Vite的HMR服务：

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

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      // 匹配所有根路径请求，排除Vite自身的HMR和客户端脚本路径
      '^/(?!@vite|__vite_ping|src|node_modules)': {
        target: 'http://my.api.host:3000',
        changeOrigin: true,
        // 若后端未配置CORS，可开启cookieDomainRewrite确保cookie正常传递
        // cookieDomainRewrite: ''
      }
    }
  }
})

配置后，代码中backgroundImage: 'url(/img/backgrounds/main.jpg)'这类请求会被自动转发到http://my.api.host:3000/img/backgrounds/main.jpg，同时Vite的HMR服务仍正常运行在localhost:5173。

方案2：强制资源URL指向后端（适合静态资源单独处理） #

如果只需要让静态资源指向后端，可通过server.origin配置修改资源生成的基础URL，同时关闭CSS Sourcemap避免路径冲突：

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

export default defineConfig({
  plugins: [react()],
  server: {
    origin: 'http://my.api.host:3000'
  },
  css: {
    devSourcemap: false
  }
})

注意：此方案会让Vite生成的所有资源（包括React客户端脚本）都指向后端，需要确保后端能正确返回这些资源，否则会导致页面无法加载。因此方案1的代理方式更稳妥。

生产环境无需上述配置，直接保持base: '/'即可，由Node服务直接处理根路径请求。

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