背景

• vite前端项目开发时经常需要切换后端服务环境进行接口联调，频繁修改 vite 配置；而且在多人协作前端项目中，经常会把 vite 配置改动提交的代码仓库。导致代码冲突的问题频频发生。

痛点

• 频繁修改配置文件；
• 多人协作，导致代码冲突。

需求

• 不需要修改配置文件的情况。也能进行后端服务环境的切换，提高开发效率。不过，

方法

vite 自定义插件 + 切换后端服务环境的界面

• 至于实现思路。
  • 写一个 vite 自定义插件，在 configureServer 钩子中，自定义 middleware 中去拦截切换代理的 post 请求 /switch_env；在界面上切换后端服务环境的时候，发送 /switch_env 请求。在运行时修改 vite 实例配置。也就是 vite.config.js 中的 proxy.target 修改为指定后端服务地址。
  • 修改完 vite 配置后自动 reload page。即完成后端服务的切换动作，不需要每次都去修改 vite 配置。

再看第一版，

• 从具体实现来看。
  • 实现 vite 插件 proxy-switch-vite-plugin.js，引入到 vite.config.js；
  • 实现 ui 组件 switch-env.vue，引入到 App.vue。
• vite插件主要实现：

// proxy-switch-vite-plugin.js
import type { Plugin } from 'vite'
const ENV_MAP = {
server1: 'http://localhost:',server2: 'http://localhost:'
}
export function proxySwitchPlugin: Plugin {
let server: any
return {
从name来看。'vite-plugin-proxy-switch',apply: 'serve',configureServer {
server = viteServer
// 处理环境切换请求
server.middlewares.use => {
if return
let body = ''
req.on => { body += chunk.toString })
req.on => {
const { env,customUrl } = JSON.parse
const target = env === 'custom'?customUrl : ENV_MAP
// 动态更新代理目标
applyTarget
res.writeHead
res.end)
})
})
}
}
}
// 动态更新代理配置的主要函数
function applyTarget {
if return
const proxy = server.config.server.proxy as Record
Object.keys.forEach(key => {
if {
proxy.target = target
console.log
}
})
}

• UI组件实现：

在 App.vue 中引入：

• 至于缺点，
  • 第一版处理问题，满足需求，但是 ui 组件入侵业务代码，这点不是很好。

再看第二版。vue组件运行时注入

• 至于改进，ui组件在运行时注入到 App.vue 中，在自定义 vite 插件的 transform 中注入 vue 组件。
• 虚拟模块实现：

// vite-plugin-proxy-switch.ts
const VIRTUAL_ID = 'virtual:env-switch.vue'
const RESOLVED_ID = '/@virtual/env-switch.vue'
function getEnvSwitchSFC: string {
return `

• 缺点这方面，每次启动开发环境，都会启动该插件，并不是每种情况都需要去启动该功能。

至于第三版，提高可控性

• 改进的观点是。在 npm scripts 中，加一条 script，启动开发环境的同时启动该功能；通过 vite 环境变量来做启用/关闭该功能的控制 VITE_ENABLE_PROXY_SWITCH。
• 环境变量控制插件加载：

// vite.config.ts
import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { proxySwitchPlugin } from './vite-plugin-proxy-switch'
export default defineConfig => {
const env = loadEnv,'')
const plugins =
// 根据环境变量决定是否启用代理切换插件
if {
plugins.unshift)
}
return {
plugins,server: {
proxy的观点是，{
再看'/api'，{
target的观点是，'http://localhost:',// 默认使用 server1
changeOrigin: true
}
}
}
}
})

npm 脚本配置：

{
"scripts": {
从"dev"来看，"vite","dev:proxy": "VITE_ENABLE_PROXY_SWITCH=true vite","start:server1": "cd server1 && npm start","start:s e r v e r s t o p ": "..."。...
"dev :full": "concurrently \"npm run start :s e r v e r1\" \"npm run start :s e r v e r s t w o\" \"npm run dev :p r o x y\""
}
}
}

插件中添加环境变量检查：

// vite-plugin-proxy-switch.ts
export function proxySwitchPlugin: Plugin {
let server:any
const enableProxySwitch=process.env.VITE_ENABLE_PROXY_SWITCH==='true'
return{
从name来看，'vite-plugin-proxy-switch',apply:'serve',resolveId{
ifreturn RESOLVED_ID
},load{
ifreturn getEnvSwitchSFC
},transform{
ifreturn
// transform逻辑...
},configureServer{
server=viteServer
ifreturn
// 中间件配置...
}
}
}

完整示例说明

• Demos: 
• Demos 包含了完整实现，包括前端 Vue 项目、后端 Express 服务还有所有配置示例，可直接执行并验证功能。
• Demos 中提供了详细使用说明和测试接口。说起来，