如何在 Vite 中配置代理（ proxy ）？

在Vite中配置代理主要是为了解决开发环境中的跨域请求问题。Vite 使用了强大的开发服务器，支持通过配置代理来转发特定的 API 请求到另一个服务器，这样就能绕过浏览器的同源策略限制。

实现步骤

1. 找到或创建 Vite 配置文件

   Vite 项目的根目录通常会有一个名为 vite.config.js 或 vite.config.ts 的配置文件。

2. 配置代理

   在该配置文件中，可以通过修改 server.proxy 选项来设置代理。这个选项接受一个对象，对象的键是要代理的请求路径（可以是具体的 API 路径或者匹配模式），对象的值是一个指定代理目标和其他配置的对象。

示例代码

假设你有一个 API 服务运行在 http://localhost:5000，而你的 Vite 服务运行在 http://localhost:3000。你想要将所有对 /api 的请求代理到 http://localhost:5000。你可以这样配置你的 vite.config.js：

javascript
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      // 使用字符串简写
      '/api': 'http://localhost:5000',
      
      // 完整格式
      '/api2': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api2/, '')
      }
    }
  }
});

配置解释

• /api: 这是一个简写方式，所有对 /api 的请求都会被转发到 http://localhost:5000/api。
• /api2: 这是一个更详细的配置，其中 changeOrigin 设置为 true 可以避免主机头的问题，rewrite 选项则用于重写 URL 路径。

如何测试配置是否生效？

你可以在本地启动你的 Vite 开发服务器，然后尝试请求被代理的 API。如果一切设置正确，你应该能看到请求被正确转发，并且接收到来自目标服务器的响应。

注意事项

• 确保代理的目标服务器已正确运行。
• 修改配置文件后，通常需要重启 Vite 开发服务器。

通过这种方式，你可以在本地开发环境中轻松处理跨域请求问题，改善开发体验。