Vite 如何配置代理服务器？

在Vite中配置代理服务器可以通过修改项目的vite.config.js（或vite.config.ts）文件来完成。Vite内置了对代理的支持，这通常用于解决开发环境中的跨域请求问题。

以下是一个基本的代理配置示例：

javascript
// vite.config.js 或 vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      // 使用字符串简写
      '/foo': 'http://localhost:4567',
      // 完整选项配置
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      }
    }
  }
})

在这个配置中，你可以看到几种不同的代理设置：

1. 字符串简写方式：所有到/foo的请求都会被代理到http://localhost:4567/foo。
2. 完整选项配置：所有到/api的请求都会被代理到http://jsonplaceholder.typicode.com，同时changeOrigin: true表示是否需要变更请求头中的Origin。rewrite选项是一个函数，用于修改被代理的路径，这里它将路径中的/api移除。
3. 正则表达式写法：匹配所有以/fallback/开头的请求，并做相应的代理和重写。

需要注意的是，在代理请求时，Vite会保留原始的请求路径。如果你的代理服务器需要不同的路径，可以通过rewrite选项来改写路径。

配置完成后，你需要重启你的Vite开发服务器才能使配置生效。