vite配置跨域代理proxy

vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import createProxyConfig from './config-c/proxy'
export default defineConfig((configEnv) => {
    const config = loadEnv(configEnv.mode, './')
    return {
        server: {
          port: 3000, // 配置服务器端口
          open: true, // 是否自动打开浏览器
          cors: true, // 允许跨域
          proxy: createProxyConfig(config)  // 导入proxy方法
        }
    }
}

./config-c/proxy.ts 封装proxy方法

import type { ProxyOptions } from 'vite'

/**
 * 跨域配置,网络代理
 * VITE_HTTP_PROXY  是否开启代理
 * VITE_BASE_URL    代理的http
 * VITE_PROXY_NAME  代理的名称
 */
const createProxyConfig = (config: Record<string, string>) => {
  const { VITE_HTTP_PROXY, VITE_BASE_URL, VITE_PROXY_NAME } = config
  const isOpenProxy = VITE_HTTP_PROXY === 'true'
  const envConfig = { api: VITE_BASE_URL, proxyName: VITE_PROXY_NAME }

  if (!isOpenProxy) return undefined
  const proxy: Record<string, string | ProxyOptions> = {
    [envConfig.proxyName]: {
      target: envConfig.api,
      changeOrigin: true,
      rewrite: (path) => path.replace(new RegExp(`^${envConfig.proxyName}`), '')
    }
  }
  return proxy
}

export default createProxyConfig

.env.development 开发环境

VITE_HTTP_PROXY = true
VITE_PROXY_NAME = '/api'
VITE_BASE_URL='http://xxxxx.cn/api'

.env.production 生产环境

VITE_HTTP_PROXY = false
VITE_PROXY_NAME = '/api'
VITE_BASE_URL='http://xxxxx.cn/api'

封装的proxy文件放在src文件夹同级下的情况需要配置一下tsconfig.node.json的include

{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node"
  },
  "include": ["vite.config.ts", "config-c/*.ts"]
}