vite-proxy-plugin

🔧 可视化管理 Vite 代理配置的插件，支持实时编辑和日志查看。

✨ 特性

• 📋 可视化配置：通过 Web UI 管理代理规则
• 🔄 热更新：配置修改后自动重启服务器
• 📊 请求日志：记录所有代理请求的详情
• 💾 持久化存储：配置保存到本地文件
• 🎯 类型安全：完整的 TypeScript 支持

📦 安装

npm install vite-proxy-plugin --save-dev
# or
pnpm add vite-proxy-plugin -D
# or
yarn add vite-proxy-plugin -D

🚀 使用

1. 在 vite.config.ts 中引入插件

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { viteProxyPlugin } from "vite-proxy-plugin";

export default defineConfig({
  plugins: [
    react(),
    viteProxyPlugin(), // 添加插件
  ],
});

2. 启动开发服务器

npm run dev

3. 访问管理界面

在浏览器中打开项目，插件会自动在项目根目录创建 _proxy-config/ 目录：

your-project/
├── _proxy-config/
│   ├── proxy.config.json  # 代理配置文件
│   └── proxy.log          # 请求日志文件

4. 配置代理规则

在代码中通过 Web UI 添加代理规则，或直接编辑 _proxy-config/proxy.config.json：

{
  "/api": {
    "target": "http://localhost:3000",
    "changeOrigin": true
  },
  "/test": {
    "target": "http://localhost:4000",
    "changeOrigin": true,
    "ws": true
  }
}

📖 配置选项

ProxyRule

interface ProxyRule {
  target: string; // 目标服务器地址
  changeOrigin?: boolean; // 是否改变 origin（默认 true）
  ws?: boolean; // 是否支持 WebSocket（默认 false）
  secure?: boolean; // 是否验证 SSL 证书（默认 true）
  rewrite?: Record<string, string>; // 路径重写规则
}

示例配置

{
  "/api": "http://localhost:3000", // 简写形式
  "/ws": {
    "target": "ws://localhost:3001",
    "ws": true,
    "changeOrigin": true
  },
  "/legacy": {
    "target": "https://old-api.example.com",
    "secure": false, // 忽略 SSL 证书验证
    "rewrite": {
      "^/legacy": "" // 移除 /legacy 前缀
    }
  }
}

🎯 API 端点

插件会在开发服务器上注册以下 API 端点：

• GET /_proxy_api/config - 获取当前代理配置
• POST /_proxy_api/config - 更新代理配置
• GET /_proxy_api/logs?limit=100 - 获取请求日志
• POST /_proxy_api/logs/clear - 清空日志

🔧 开发

# 克隆仓库
git clone https://github.com/yourusername/vite-proxy-plugin.git

# 安装依赖
pnpm install

# 开发模式（运行示例项目）
pnpm dev

# 构建插件
pnpm build:plugin

# 发布到 npm
pnpm publish

📝 注意事项

1. 配置文件位置：_proxy-config/proxy.config.json 可以提交到 Git，但 proxy.log 建议添加到 .gitignore

2. 自动重启：修改配置后，插件会自动重启 Vite 服务器（约 1-2 秒），页面会自动刷新

3. 与 vite.config.ts 的关系：插件的配置会与 vite.config.ts 中的 server.proxy 合并，插件配置优先级更高

📄 License

MIT

🤝 贡献

欢迎提交 Issue 和 Pull Request！

🙏 致谢

• Vite
• chokidar
• sirv