前言

在vite中配置服務(wù)代理和webpack中大差不差,不過有些寫法會有些不同

具體配置:配置 Vite {#configuring-vite} | Vite中文網(wǎng)

這里我寫了一個demo,如下所示

開啟node服務(wù)

我用express啟動了一個服務(wù),分別暴露兩個接口

?進(jìn)行相關(guān)配置

在vite.config.ts文件中進(jìn)行配置

export default defineConfig({server:{// cors: true, // 默認(rèn)啟用并允許任何源open: true, // 在服務(wù)器啟動時自動在瀏覽器中打開應(yīng)用程序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/,'')}}}
})

請求測試

<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的請求結(jié)果')})}const testApi2 = ()=>{request.get(`${requestUrl2}/test`).then((res:any)=>{console.log(res,'/newApi/test的請求結(jié)果')})}
</script>
<style lang="less" scoped></style>

?

?