vite中配置服务代理

前言

在vite中配置服务代理和webpack中大差不差,不过有些写法会有些不同

具体配置:配置 Vite {#configuring-vite} | Vite中文网

这里我写了一个demo,如下所示

开启node服务

我用express启动了一个服务,分别暴露两个接口

进行相关配置

在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>
相关推荐
芭拉拉小魔仙8 分钟前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump29 分钟前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD37 分钟前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~1 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
德育处主任Pro1 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin1 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
前端小马1 小时前
前后端Long类型ID精度丢失问题
java·前端·javascript·后端
用户1456775610372 小时前
干净的图片批量处理,处理速度飞快
前端
用户1456775610372 小时前
亲测好用!简单实用的图片尺寸调整工具
前端
索西引擎2 小时前
npm、yarn、pnpm
前端·npm·node.js