reactjs v18 vite 配置 api 代理

在 React v18 和 Vite 中配置 API 代理的步骤如下：

在你的 React 项目中安装 Vite：npm install vite --save-dev。
在项目的根目录下创建一个 vite.config.js 文件，并添加以下内容：

const { createServer } = require('vite')

createServer({
  proxy: {
    '/api': {
      target: 'http://api.example.com', // 替换为你的 API 服务器地址
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}).listen(3000)

在 proxy 对象中，你可以配置多个代理规则，每个规则都是一个键值对，其中键是代理路径前缀，值是代理目标 URL。

上述配置中，所有以 /api 开头的请求都会被代理到 http://api.example.com 上，并且代理后的请求路径会去除掉 /api 前缀。

在 package.json 文件中添加一个 scripts 命令来启动 Vite 服务器。找到 "scripts" 对象，并添加以下内容：

"scripts": {
  "start": "vite"
}

现在你可以使用 npm start 命令来启动 Vite 服务器。

在你的 React 组件中，可以直接使用 /api 前缀来发起 API 请求，例如：

fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))

以上是在 React v18 和 Vite 中配置 API 代理的基本步骤。你可以根据你的实际需求和后端 API 的配置来调整代理规则