ReactJS v18 Vite 配置代理：/admin 代理，/admin-panel 不代理

要在 ReactJS v18 和 Vite 中配置代理，你可以按照以下步骤进行操作：\n\n1. 在项目的根目录下创建一个名为vite.config.js的文件。\n2. 在vite.config.js文件中，使用createProxy函数来配置代理规则。示例如下：\n\njavascript\nimport { createProxy } from 'vite'\n\nexport default {\n proxy: createProxy({\n '/admin': {\n target: 'http://your-proxy-target',\n changeOrigin: true,\n rewrite: (path) => path.replace(/^/admin/, '')\n }\n })\n}\n\n\n上述示例中，/admin的请求将被代理到http://your-proxy-target，并且路径中的/admin将被重写为空字符串。\n\n3. 在/admin-panel路径不需要代理的情况下，可以使用Vite插件vite-plugin-legacy来实现路由重写。首先，安装该插件：\n\nbash\nnpm install vite-plugin-legacy --save-dev\n\n\n4. 在vite.config.js文件中，添加以下配置以启用vite-plugin-legacy插件：\n\njavascript\nimport { createProxy } from 'vite'\nimport legacy from '@vitejs/plugin-legacy'\n\nexport default {\n proxy: createProxy({\n '/admin': {\n target: 'http://your-proxy-target',\n changeOrigin: true,\n rewrite: (path) => path.replace(/^/admin/, '')\n }\n }),\n plugins: [\n legacy({\n targets: ['ie >= 11'],\n renderLegacyChunks: true\n })\n ]\n}\n\n\n5. 在React组件中，你可以使用相对路径来发送请求。例如，在/admin路径下发送请求，可以使用/api作为相对路径。\n\njavascript\nfetch('/api/some-data')\n .then(response => response.json())\n .then(data => console.log(data))\n .catch(error => console.error(error))\n\n\n这样，/admin路径下的请求将被代理到http://your-proxy-target/api/some-data。\n\n需要注意的是，在开发环境中，Vite的代理配置只适用于开发服务器。如果你打包部署应用程序，你需要在生产环境中配置真正的代理服务器来处理代理请求。