首页vue3+vite+ts前端项目，接口地址代理两个，然后配置

vue3+vite+ts前端项目，接口地址代理两个，然后配置

时间: 2024-11-30 08:28:41 浏览: 107

在 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地址。

阅读全文