在vite.config.ts中配置proxy后台api代理实现前台开发环境与后台生产环境对接

学习 PlayEdu 项目时，需要搭建前台代码开发环境。首先通过 git clone 下载源码，使用 VS Code 打开，并用 nvm 配置对应的 Node.js 版本：

# 下载源码
git clone --branch main https://gitee.com/playeduxyz/playedu.git playedu

# 下载 nodejs 20.19.5 版本
nvm install 20.19.5# 切换到 20.19.5 版本
nvm use 20.19.5# 查看当前激活版本
nvm list# 安装项目依赖包（本项目为 React 项目）
npm install# 启动开发环境
npm run dev

熟悉前端开发的同学都知道，前台代码运行时需要调用后台 API 接口。如果前台运行环境与后台 API 接口不在同一域名和端口下，会产生跨域问题，影响页面正常显示。

由于 playedu-pc 项目使用 Vite 打包 React，可以很方便地在开发环境中配置后台 API 代理，解决前后端地址不一致的问题。配置位置在 vite.config.ts 中：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import gzipPlugin from "rollup-plugin-gzip";
import legacy from "@vitejs/plugin-legacy";// https://vitejs.dev/config/
export default defineConfig({server: {host: "0.0.0.0",port: 9797,// 新增后台 API 代理配置
    proxy: {'/api': {target: 'http://10.2.10.180:9800',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '/api/api')}}},plugins: [react(),legacy({targets: ["chrome 52"],additionalLegacyPolyfills: ["regenerator-runtime/runtime"],renderLegacyChunks: true,modernPolyfills: true,}),],build: {rollupOptions: {plugins: [gzipPlugin()],},},
});

其中，proxy 配置在源码中原本不存在，是开发时新增的：

// 新增后台 API 代理配置
proxy: {'/api': {target: 'http://10.2.10.180:9800',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '/api/api')}
}

因为生产环境的 API 地址格式为：http://10.2.10.180:9800/api/api/v1/course/4，所以需要添加 rewrite: (path) => path.replace(/^\/api/, '/api/api') 这段重写规则。