JavaScript多环境接口配置需分离配置与代码，通过构建时（如Vite/VUE_APP_前缀变量）或运行时（外链config.js）注入baseURL，并在请求层统一适配路径、header等，严禁硬编码和敏感信息暴露。
在 JavaScript 项目中，接口调用的多环境配置（如开发、测试、预发、生产）不能硬编码，而应通过构建时或运行时动态注入，确保安全性与可维护性。核心思路是：**分离配置与代码，利用环境变量控制基础 URL 和关键开关，并在请求发起前统一处理**。
构建时注入：通过环境变量 + 打包工具替换
这是最常用也最安全的方式，适用于 Webpack、Vite、Rollup 等现代构建工具。原理是在构建阶段将环境变量内联为静态常量，避免运行时读取敏感信息。
- 在 .env.development 中写：VUE_APP_API_BASE_URL=https://dev-api.example.com
- 在 .env.production 中写：VUE_APP_API_BASE_URL=https://api.example.com
- 在请求封装层（如 axios 实例）中直接使用：baseURL: import.meta.env.VUE_APP_API_BASE_URL（Vite）或 process.env.VUE_APP_API_BASE_URL（Webpack）
- 注意：只有以 VUE_APP_（Vue）或 VITE_（Vite）开头的变量才会被注入，普通 NODE_ENV 或自定义变量不会暴露到客户端
运行时注入：通过外链 JSON 或全局变量加载配置
适合需要运行时切换环境（如白名单切换）、或构建产物需复用于多个环境的场景。配置文件不参与打包，由 HTML 或入口 JS 动态加载。
- 准备一个 config.js 或 config.json，放在 public 目录下，内容如：{ "apiBase": "https://test-api.example.com", "enableMock": false }
- 在 index.html 的 <head> 中通过 <script src="/config.js"></script> 加载（若为 JS 格式，需挂载到 window.APP_CONFIG）
- 请求拦截器中读取：axios.defaults.baseURL = window.APP_CONFIG?.apiBase || '/api'
- 优势是无需重新构建即可切环境；缺点是配置暴露在前端，不可存放密钥或内部地址
请求层统一适配：基于环境做路径/参数/头信息动态调整
光有 base URL 不够，有些接口在不同环境行为不同（如 mock 开关、灰度 header、token 注入方式），应在请求发起前集中处理。
立即学习“Java免费学习笔记（深入）”；
- 封装 request 函数，在发送前检查当前环境：if (import.meta.env.DEV && config.enableMock) { url = '/mock' + url }
- 为测试环境自动添加灰度标识：config.headers['X-Env'] = import.meta.env.PROD ? 'prod' : 'staging'
- 对内网环境走代理路径，对外网走真实域名，可在 baseURL 后拼接路径前做判断，避免跨域问题
避免常见坑：环境误用与泄露风险
多环境配置容易因疏忽导致线上请求发到测试接口，或敏感配置意外暴露。
- 禁止在代码中写死任何环境相关字符串，如 'https://' + env + '.example.com' —— 拼接逻辑本身可能出错，且无法被构建工具校验
- 不要把数据库连接串、密钥、内部服务地址放入前端环境变量 —— 它们本就不该出现在浏览器中
- CI/CD 流水线中，确保不同环境使用对应 .env 文件，且构建命令明确指定模式，例如：vite build --mode staging
