Vite 配置不同环境跨域

在Vite项目中，配置不同环境的跨域可以通过修改vite.config.js文件来实现。以下是一个配置示例，其中定义了两个环境（development和production）的跨域配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
// 跨域配置函数
function getProxyConfig(env) {
  if (env === 'development') {
    return {
      '/api': {
        target: 'http://dev.api.com',
        changeOrigin: true,
        // 其他可选配置...
      },
    };
  } else if (env === 'production') {
    return {
      '/api': {
        target: 'http://prod.api.com',
        changeOrigin: true,
        // 其他可选配置...
      },
    };
  }
}
 
// 获取环境变量
const env = process.env.VITE_ENV;
 
export default defineConfig({
  plugins: [react()],
  server: {
    // 使用环境变量来设置跨域
    proxy: getProxyConfig(env),
  },
});

在这个配置中，我们定义了一个getProxyConfig函数，它根据传入的环境变量来返回不同的代理配置。然后，我们通过从环境变量VITE_ENV获取当前环境，并将其传递给该函数来设置跨域配置。

确保在启动Vite开发服务器之前，正确设置了环境变量。例如，在不同的环境下可以通过以下命令来设置环境变量：

# 开发环境
VITE_ENV=development vite
 
# 生产环境
VITE_ENV=production vite

这样，你就可以根据不同的环境来配置跨域请求了。