vite.config.ts配置代理
时间: 2023-12-07 19:29:12 浏览: 274
vue3+ts+vite+element plus生成mpm包
在vite.config.ts配置文件中,我们可以使用代理来处理跨域请求。要配置代理,我们需要使用vite内部提供的`createProxy`函数,并将其作为`server.proxy`选项的值传递进去。下面是一个示例配置:
```typescript
import { defineConfig } from 'vite'
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://api.example.com', // 代理目标的地址
changeOrigin: true, // 改变请求头中的Host字段,用于反向代理
rewrite: (path) => path.replace(/^\/api/, ''), // 重写请求路径,去掉/api前缀
}
}
}
})
```
在上面的示例中,我们配置了一个代理规则,将以`/api`开头的请求代理到`http://api.example.com`。`changeOrigin`选项用于改变请求头中的Host字段,以便在反向代理时正确处理跨域请求。`rewrite`选项允许我们重写请求路径,这里我们去掉了`/api`前缀,以便在请求目标服务器时不包含该前缀。
通过以上配置,当我们在前端代码中发送请求到`/api/users`时,Vite会自动将请求代理到`http://api.example.com/users`。
请注意,以上只是一个简单的示例配置,你可以根据具体的需求进行更多的配置。在`server.proxy`选项中,你可以配置多个代理规则来处理不同的请求。
希望以上信息对你有帮助!如果你还有其他问题,请随时提问。
阅读全文