前言
在vite中配置服务代理和webpack中大差不差,不过有些写法会有些不同
具体配置:配置 Vite {#configuring-vite} | Vite中文网
这里我写了一个demo,如下所示
开启node服务
我用express启动了一个服务,分别暴露两个接口
![](https://file.jishuzhan.net/article/1743474201341202433/602d65b6c7250992f5c6f2ffd6002419.webp)
![](https://file.jishuzhan.net/article/1743474201341202433/f03081457870a6efc8b236c136bfee09.webp)
进行相关配置
在vite.config.ts文件中进行配置
javascript
export default defineConfig({
server:{
// cors: true, // 默认启用并允许任何源
open: true, // 在服务器启动时自动在浏览器中打开应用程序
proxy:{
'/api':{
target:'http://localhost:3030/api',
changeOrigin:true,
rewrite:(path)=>path.replace(/^\/api/,'')
},
'/newApi':{
target:'http://localhost:3030/newApi',
changeOrigin:true,
rewrite:(path)=>path.replace(/^\/newApi/,'')
}
}
}
})
请求测试
html
<template>
<el-button @click="testApi1">请求接口1</el-button>
<el-button @click="testApi2">请求接口2</el-button>
</template>
<script lang="ts" setup>
import request from 'axios'
const requestUrl1:string = '/api'
const requestUrl2:string = '/newApi'
const testApi1 = ()=>{
request.get(`${requestUrl1}/test`).then((res:any)=>{
console.log(res,'/api/test的请求结果')
})
}
const testApi2 = ()=>{
request.get(`${requestUrl2}/test`).then((res:any)=>{
console.log(res,'/newApi/test的请求结果')
})
}
</script>
<style lang="less" scoped>
</style>
![](https://file.jishuzhan.net/article/1743474201341202433/c095fdb31a53730ff5be04be13097a53.webp)
![](https://file.jishuzhan.net/article/1743474201341202433/d29db47e633c571f2d2b5b92fa7229d5.webp)
![](https://file.jishuzhan.net/article/1743474201341202433/3ca9bdd6d1b8711c009a8248dcba27e0.webp)