EnvManage - 多环境开发代理管理工具

为什么选择 EnvManage？

在前端日常开发中，我们经常需要在多个环境之间切换：开发环境、测试环境、预发布环境、生产环境，或者是不同的功能分支。传统的开发方式存在诸多不便：

手动修改配置 - 每次切换环境都需要修改 API 基础 URL
频繁重启服务 - 改完配置还要重新启动开发服务器
Cookie 冲突 - 不同环境的登录状态相互覆盖
缺乏管理界面 - 无法直观查看和管理所有环境

EnvManage 应运而生，通过智能的多环境代理系统，帮你轻松解决以上所有问题。只需在可视化界面中简单配置，就能实现环境的快速切换和管理。

✨ 核心特性

智能请求路由

根据当前访问的端口，自动将请求路由到对应的 API 服务器。无需手动修改代码，切换环境只需切换端口。

每个环境拥有独立的 Cookie 存储空间。在 3000 端口登录环境 A，再在 3001 端口登录环境 B，两者的登录状态互不影响。

可视化管理 Dashboard

简洁美观的管理界面，统一管理所有环境、开发服务器和代理配置。所有操作一目了然。

多服务器并行支持

同时启动多个开发服务器，通过界面一键启动/停止/切换，无需频繁重启。

🏗️ 工作原理

EnvManage 采用两级代理架构，确保请求能够准确到达目标服务器：

复制代码

┌─────────────────────────────────────────────────────────────────┐
│                           浏览器                                 │
└─────────────────────────────────────────────────────────────────┘
                                 │
         ┌───────────────────────┼───────────────────────┐
         │                       │                       │
         ▼                       ▼                       ▼
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│  环境 A 代理     │    │  环境 B 代理     │   │  环境 C 代理     │
│  (端口 3000)     │   │  (端口 3001)     │   │  (端口 3002)     │
└────────┬────────┘    └────────┬────────┘    └────────┬────────┘
         │                       │                       │
         └───────────────────────┼───────────────────────┘
                                 │
                                 ▼
┌─────────────────────────────────────────────────────────────────┐
│                    本地开发服务 (端口 5173)                       │
└─────────────────────────────────────────────────────────────────┘
                                 │
                                 ▼
┌─────────────────────────────────────────────────────────────────┐
│                    后置代理服务 (端口 3099)                       │
│                   管理 Dashboard + 请求路由中心                   │
└─────────────────────────────────────────────────────────────────┘
                                 │
         ┌───────────────────────┼───────────────────────┐
         │                       │                       │
         ▼                       ▼                       ▼
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   API 服务器 A   │   │   API 服务器 B   │    │   API 服务器 C   │
│  (开发服务器)    │    │  (开发服务器)    │    │  (开发服务器)    │
└─────────────────┘    └─────────────────┘    └─────────────────┘

代理流程说明

前置代理 (PreProxyServer)：每个环境对应一个独立代理服务器，监听不同端口
- 接收前端请求
- 负责 Cookie 改写和隔离
- 将请求转发到本地开发服务（vite,webpack-dev-server 等启动的服务）
后置代理 (PostProxyServer)：中央管理服务
- 提供管理 Dashboard 界面
- 接收所有开发服务器的请求
- 根据请求特征（Cookie/Header）路由到对应的 API 服务器
- 统一处理响应

🚀 快速开始

1. 安装

bash 复制代码

# 使用 npm
npm install env-manage-plugin --save-dev

# 或使用 pnpm (推荐)
pnpm add env-manage-plugin -D

# 或使用 yarn
yarn add env-manage-plugin -D

2. 独立命令行启动

bash 复制代码

# 直接运行
npx envm

# 指定端口
npx envm -p 3000

# 查看所有可用选项
npx envm -h

启动成功后，浏览器访问 http://localhost:3099 打开管理界面。

⚙️ 配置说明

配置优先级（从高到低）

约定优于配置，一般不需要调整

命令行参数 - 优先级最高
环境变量 - .env 文件
package.json - 项目根目录的 envm 字段

配置选项

选项	类型	默认值	说明
port	number	3099	管理服务端口号
apiPrefix	string	/dev-manage-api	API 接口前缀，避免与项目 API 冲突
cookieSuffix	string	envm	Cookie 后缀，用于 Cookie 隔离
logLevel	string	info	日志级别 (debug/info/warn/error)

通过环境变量配置

在项目根目录创建 .env 文件：

env 复制代码

# 设置管理服务端口
envm_port=3099

# 设置 API 前缀
envm_apiPrefix=/dev-manage-api

# 设置 Cookie 后缀
envm_cookieSuffix=envm

# 设置日志级别
envm_logLevel=info

注意：环境变量添加 envm_ 前缀是为了避免与其他应用的配置冲突。

通过 package.json 配置

json 复制代码

{
  "name": "my-project",
  "envm": {
    "port": 3099,
    "logLevel": "debug"
  }
}

📖 使用指南

创建第一个环境

打开管理 Dashboard：http://localhost:3099
添加一个 Dev Server （开发服务器地址，即 vite或者webpack启动的地址，如 http://localhost:8080）
添加一个 Environment （环境名称、API 基础 URL（原来webpack需要转发到的地址）、绑定开发服务器）
点击启动按钮启动代理
点击首页地址，即可访问对应的页面了

配置你的开发服务器

将 API 请求代理到 EnvManage 后置服务：

Vite 配置

typescript 复制代码

export default defineConfig({
  server: {
    proxy: {
      "/api": "http://localhost:3099",
    },
  },
});

Webpack 配置

javascript 复制代码

module.exports = {
  devServer: {
    proxy: {
      "/api": "http://localhost:3099",
    },
  },
};

EnvManage - 多环境开发代理管理工具