🧩 环境切换像魔术！揭秘汇丰前端项目中的「一键多环境切换术」！

前端付豪
75 阅读2分钟

🧩 环境切换像魔术！揭秘汇丰前端项目中的「一键多环境切换术」！

你还在手动改 .env 吗？你还在发错版本连到生产数据库被罚咖啡钱吗？
别慌，今天带你复刻汇丰前端项目中的环境魔法术，让你的项目一键切换 test1 / test2 / QA / 生产，绝不手抖！

✅ 写这篇的原因

在银行、券商、支付等系统中，同一个前端项目往往要对接多个后端环境：

  • 测试1环境（test1）
  • 测试2环境（test2）
  • QA验收环境（qa）
  • 预发环境（staging）
  • 生产环境（production）

每次改 .env / 重启服务 / 改包名是不是让你苦不堪言？
汇丰的解决方案是：前端打包后还能“切换后端地址” ！本文就手把手带你实现它。

🧰 技术选型

技术用途
Vite构建工具，支持动态注入环境变量
Naive UI前端切换器 UI 展示
localStorage本地存储当前环境
Axios根据当前环境请求后端

🧱 项目结构（简化）

src/
├── config/
│   └── envMap.ts     # 所有后端环境映射表
├── utils/
│   └── request.ts    # axios 封装
├── App.vue
├── main.ts

🧪 实战代码：核心功能复刻

1️⃣ 配置多环境地址映射（envMap.ts）
export const envMap = {
  test1: 'https://api-test1.hsbc.com',
  test2: 'https://api-test2.hsbc.com',
  qa: 'https://api-qa.hsbc.com',
  prod: 'https://api.hsbc.com'
}

export const getBaseUrl = () => {
  const env = localStorage.getItem('env') || 'test1'
  return envMap[env]
}
2️⃣ axios 请求封装（request.ts）
import axios from 'axios'
import { getBaseUrl } from '@/config/envMap'

const request = axios.create({
  baseURL: getBaseUrl(),
  timeout: 8000
})

export default request
3️⃣ 切换环境组件（EnvSwitcher.vue）
<template>
  <n-select :options="options" v-model:value="currentEnv" @update:value="changeEnv" />
</template>

<script setup>
import { envMap } from '@/config/envMap'
import { useMessage } from 'naive-ui'

const message = useMessage()
const currentEnv = ref(localStorage.getItem('env') || 'test1')

const options = Object.keys(envMap).map(key => ({ label: key, value: key }))

const changeEnv = (env) => {
  localStorage.setItem('env', env)
  message.success(`🔁 环境切换为：${env}，即将刷新`)
  setTimeout(() => window.location.reload(), 500)
}
</script>
4️⃣ 页面调用接口自动走当前环境
import request from '@/utils/request'

request.get('/account/info').then(res => {
  console.log('账户信息：', res.data)
})

🖥️ 使用效果展示

✅ 页面右上角点击“test2”
✅ 项目自动保存切换环境并刷新
✅ 所有请求走对应后端地址
✅ 本地开发、打包后部署都支持切换！

🎉 彩蛋：上线后还能切换？

可以！方法如下：

window.HSBC_ENV = 'test2' // 页面挂载变量

然后在 request.ts 中优先判断：

const env = (window as any).HSBC_ENV || localStorage.getItem('env') || 'test1'

👉 上线后只需修改 HTML 注入变量，即可“远程操控”环境，避免重新构建！

⚠️ 易错点总结

错误点描述
❌ Vite 构建时将 baseURL 固定死导致无法切换
❌ 页面刷新后丢失环境配置没有用 localStorage 持久化
❌ 环境 key 写死在代码中不好扩展，建议统一从 envMap 动态生成选项

✅ 最佳实践：

  • 环境变量统一抽象
  • 页面展示 + 持久化 + 动态刷新一条龙
  • 打包时支持预配置默认值（如默认走 test1）

🎯 总结

  • 复刻汇丰前端多环境切换机制
  • 用 Vite + Axios + localStorage 构建了灵活可控的环境系统
  • 支持打包后动态切换后端地址，适用于复杂测试流程
avatar
文章
阅读
粉丝