Env Switch - Vite 环境一键切换

在 VS Code 状态栏一键切换前端项目的运行环境与后端代理。一个项目可配置任意多套自定义环境，支持一个页面请求多个后端服务的场景。

功能特性

状态栏点击切换环境（QuickPick 列表，可搜索）
每个环境 = 一组 env 变量 + 可选的多后端代理映射，简单/复杂项目同一套配置模型
切换后自动写入 .env.local 与 proxy.local.json，并重启插件托管的 dev server
共享配置走 git（.vscode/env.config.json），团队成员环境列表统一
个人私有环境放 .vscode/env.config.local.json（建议加进 .gitignore），同名环境覆盖共享配置

快速开始

1. 创建配置

点击状态栏「环境未配置」，或在命令面板执行 Env Switch: 切换环境，按提示创建示例配置：

// .vscode/env.config.json
{
  "envFile": ".env.local",        // 切换时写入的 env 文件
  "devCommand": "npm run dev",    // 插件托管 dev server 的启动命令
  "environments": [
    {
      "name": "本地",
      "values": { "VITE_API_BASE": "http://localhost:8080" }
    },
    {
      "name": "测试-10.1",
      "values": { "VITE_API_BASE": "http://10.1.0.10:8080" }
    }
  ]
}

2. 项目接入（vite.config.ts 一次性改 5 行）

import fs from 'node:fs'
const proxy = fs.existsSync('proxy.local.json')
  ? JSON.parse(fs.readFileSync('proxy.local.json', 'utf-8'))
  : {}

export default defineConfig({
  server: { proxy }
})

3. 使用

命令面板执行 Env Switch: 启动 dev server（之后由插件托管），点击状态栏即可切换环境，切换后自动重启。

dev server 不由插件托管时（比如你自己开的终端），切换环境后需手动重启。

多后端代理

一个页面请求多个后端时，在环境里加 proxy 字段，key 为前端请求前缀，value 为目标后端：

{
  "name": "测试-10.1",
  "values": { "VITE_API_BASE": "http://10.1.0.10:8080" },
  "proxy": {
    "/api/lism": "http://10.1.0.11:8081",
    "/api/qc":   "http://10.1.0.12:8082"
  }
}

插件会生成 vite 代理配置：

{
  "/api/lism": { "target": "http://10.1.0.11:8081", "changeOrigin": true }
}

不带 proxy 的环境会写入空对象 {}，相当于清空代理。

个人私有环境

创建 .vscode/env.config.local.json（格式与共享配置相同），同名环境会覆盖共享配置中的定义。建议将 env.config.local.json 和 proxy.local.json 加入项目 .gitignore。

命令

命令	说明
`Env Switch: 切换环境`	状态栏同款，选择并切换环境
`Env Switch: 启动 dev server`	以配置中的 devCommand 启动托管服务

发布（vsce）

npm install -g @vscode/vsce
vsce package        # 生成 vite-env-switch-0.1.0.vsix
vsce publish        # 发布到市场（需先在 Azure DevOps 创建 publisher）

首次发布前：

把 package.json 中 publisher 改为你的 publisher ID
确认市场没有同名扩展（vite-env-switch），如有冲突请改名
建议添加 repository 字段指向代码仓库
可选：准备 128x128 图标并在 package.json 添加 "icon": "icon.png"

English

Switch your Vite project's runtime environment and backend proxies from the VS Code status bar. Define any number of custom environments per project — each with its own env variables and optional multi-backend proxy mappings. Shared config lives in .vscode/env.config.json (commit it), personal overrides in env.config.local.json (gitignore it). Add a 5-line snippet to vite.config.ts to read the generated proxy.local.json, start the dev server via Env Switch: Start dev server, and switch environments with one click — the plugin rewrites .env.local + proxy config and restarts the managed dev server automatically.

Env Switch for Vite 环境一键切换

zhangxue