Vite在开发环境中使用proxy进行多个服务器的代理
-
Vite通过server.proxy配置自定义代理规则
server.proxy分为
字符串简写写法和选项写法和正则表达式写法还有proxy 实例方法在进行项目开发时，如果只需要代理一个服务器，直接用字符串简写即可
// 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
-
开发时，如果需要代理多个服务器，场景为后端接口分布在不同开发同事本机上，开发时通过选项写法代理无缝对接多个服务器。
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>
- 正则表达式写法
// 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
