Vite使用proxy配置多个代理

Vite在开发环境中使用proxy进行多个服务器的代理

1. Vite通过server.proxy配置自定义代理规则

2. server.proxy分为字符串简写写法和选项写法和正则表达式写法还有proxy 实例方法

3. 在进行项目开发时，如果只需要代理一个服务器，直接用字符串简写即可

// vite.config.ts 代理配置
    proxy: { // 代理配置
     '/dev': 'https://www.baidu.com/'
     },
    // 代理接口调用 通过dev
    export function login(data: object) {
     return request({
     url: '/user/login',
     method: 'post',
     baseURL: '/dev',
     data
     })
    }
    // 实际调用地址为
    https://www.baidu.com/dev/user/login

4. 开发时，如果需要代理多个服务器，场景为后端接口分布在不同开发同事本机上，开发时通过选项写法代理无缝对接多个服务器。

   user部分接口在https://www.baidu.com/

   customer部分接口在https://www.taobao.com/

// vite.config.ts 代理配置
    proxy: { // 代理配置
     '/user': {
     target: 'https://www.baidu.com',
     changeOrigin: true,
     rewrite: (path) => path.replace(/^\/user/, '')
     },
     '/cus': {
     target: 'https://www.taobao.com',
     changeOrigin: true,
     rewrite: (path) => path.replace(/^\/cus/, '')
     }
     },
    
    // 代理接口调用 
    // 1.调用user部分接口
    export function getUser(data: object) {
     return request({
     url: '/user/getUser',
     method: 'get',
     baseURL: '/user',
     data
     })
    }
    // 实际调用地址为
    https://www.baidu.com/user/getUser // /user通过rewrite正则过滤掉了
    
    // 2.调用cus部分接口
    export function getCus(data: object) {
     return request({
     url: '/customer/getCus',
     method: 'get',
     baseURL: '/cus',
     data
     })
    }
    // 实际调用地址为
    https://www.taobao.com/customer/getCus // /cus通过rewrite正则过滤掉了</pre>

5. 正则表达式写法

// vite.config.ts 代理配置
    '^/fallback/.*': {
     target: 'http://jsonplaceholder.typicode.com',
     changeOrigin: true,
     rewrite: (path) => path.replace(/^\/fallback/, '')
     },
    // 调用fallback部分接口
    export function getFallback(data: object) {
     return request({
     url: '/getFallback',
     method: 'get',
     baseURL: '/fallback/getFall',
     data
     })
    } 
    // 实际调用地址为
    http://jsonplaceholder.typicode.com/getFall/getFallback // //fallback/getFall通过rewrite正则过滤变成/getFall