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>
相关推荐
dasseinzumtode9 分钟前
nestJS 使用ExcelJS 实现数据的excel导出功能
前端·后端·node.js
子兮曰12 分钟前
🔥C盘告急!WSL磁盘暴增?三招秒清20GB+空间
前端·windows·docker
Jinuss12 分钟前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
stoneship15 分钟前
网页截图API-Npm工具包分享
前端
Jedi Hongbin27 分钟前
Three.js shader内置矩阵注入
前端·javascript·three.js
etcix27 分钟前
dmenux.c: integrate dmenu project as one file
c语言·前端·算法
光影少年40 分钟前
react16到react19更新及底层实现是什么以及区别
前端·react.js·前端框架
超人不会飛43 分钟前
vue3 markdown组件|大模型应用专用
前端·vue.js·人工智能
じòぴé南冸じょうげん44 分钟前
微信小程序如何进行分包处理?
前端·小程序
Jolyne_1 小时前
Table自定义单元格渲染分享
前端