vue3+vite+ts前端项目,接口地址代理两个,然后配置
时间: 2024-11-30 22:28:41 浏览: 106
在 Vue3 中结合 Vite 和 TypeScript 构建的前端项目中,通常使用 Nuxt.js 或者直接在 Vite 的配置文件(vite.config.ts 或 vite.config.js)中处理接口地址的代理。如果你需要代理两个不同的接口地址,可以这样做:
首先,在 `vite.config.ts` 文件中添加 `serverMiddleware` 属性来配置代理:
```typescript
import { defineConfig } from 'vite'
import axios from 'axios'
const api1 = 'https://example.com/api1'
const api2 = 'https://example2.com/api2'
export default defineConfig({
// ... 其他配置
build: {
server: {
middlewareMode: true,
},
},
devServer: {
port: 3000, // 自定义端口
proxy: [
{
path: /^\/api1(.*)$/, // 第一个接口的正则表达式
target: api1, // 目标域名
secure: false, // 是否启用HTTPS,如果目标是HTTPS,则应设为true
changeOrigin: true, // 允许跨域
},
{
path: /^\/api2(.*)$/, // 第二个接口的正则表达式
target: api2, // 目标域名
secure: false,
changeOrigin: true,
},
],
},
})
```
这将在开发环境中,当访问如 `/api1/your-endpoint` 或 `/api2/your-endpoint` 类似的URL时,将它们重定向到对应的API地址。
注意:确保替换 `https://example.com/api1` 和 `https://example2.com/api2` 为你实际的API地址。
阅读全文
相关推荐


















