本文旨在提供一种在前端应用中实现沙盒（Sandbox）与生产（Production）环境动态切换的教程。通过构建一个集中的环境配置管理模块和API客户端，开发者可以利用UI切换器在运行时轻松地在不同API端点间进行切换，从而提高开发、测试与演示的灵活性和效率。

1. 背景与挑战

在现代Web应用开发中，区分不同的运行环境（如开发、测试、沙盒、生产）是常见的实践。每个环境通常对应不同的后端API端点。对于需要在一个应用实例中动态切换这些环境的场景（例如，一个演示仪表盘需要在沙盒和生产数据之间切换），传统的通过构建时环境变量（如VITE_BACKEND_SANDBOX_URL）来管理API端点的方法就不再适用，因为它们在应用打包后是固定的。

本教程将介绍一种在运行时动态管理和切换API端点的方法，使其能够与前端UI的切换器（如Chakra UI的Switch组件）无缝集成。

2. 构建环境配置管理模块

核心思想是创建一个独立的JavaScript模块来集中管理所有环境的配置信息，并提供切换当前环境的功能。

立即学习“前端免费学习笔记（深入）”；

2.1 定义环境常量与配置

首先，定义环境的枚举值和每个环境的具体配置，包括API主机和基础路径。

创建一个名为 environment.js（或 environment.ts）的文件：

// environment.js

// 定义环境枚举，用于内部标识
const ENVS = {
  LOCAL: "local",
  SANDBOX: "sandbox",
  PROD: "prod",
};

// 定义每个环境的详细配置
const Environments = {
  Sandbox: {
    name: "Sandbox",
    env: ENVS.SANDBOX,
    apiHost: "http://156.21.190.78", // 沙盒环境API主机
    apiBase: "/api/v1",              // API基础路径
  },
  Prod: {
    name: "Production",
    env: ENVS.PROD,
    apiHost: "http://156.23.190.78", // 生产环境API主机
    apiBase: "/api/v1",
  },
  // 可以根据需要添加更多环境，例如 Local
  // Local: {
  //   name: "Local",
  //   env: ENVS.LOCAL,
  //   apiHost: "http://localhost:8000",
  //   apiBase: "/api/v1",
  // },
};

// 当前激活的环境，默认为生产环境
const Environment = {
  current: Environments.Prod,
};

// 主机名匹配器，用于自动检测环境（可选）
const ENV_MATCHERS = {
  [ENVS.LOCAL]: ["localhost", "127.0.0.1"],
  [ENVS.SANDBOX]: ["sandbox"], // 例如，如果沙盒环境部署在 sandbox.yourdomain.com
};

// 检查给定主机URL是否匹配特定环境
const isEnv = (hostUrl, environment) => {
  const matchers = ENV_MATCHERS[environment];
  if (!matchers) {
    // 如果没有为该环境定义匹配器，则认为不匹配或抛出错误
    return false;
  }
  return matchers.some((match) => hostUrl.includes(match));
};

/**
 * 根据环境名称显式设置当前环境。
 * @param {string} envName - 要设置的环境名称，如 "Sandbox" 或 "Production"。
 */
const setEnvironmentByName = (envName) => {
  switch (envName) {
    case Environments.Sandbox.name:
    case ENVS.SANDBOX:
      Environment.current = Environments.Sandbox;
      break;
    case Environments.Prod.name:
    case ENVS.PROD:
      Environment.current = Environments.Prod;
      break;
    // case Environments.Local.name:
    // case ENVS.LOCAL:
    //   Environment.current = Environments.Local;
    //   break;
    default:
      console.warn(`未知环境名称: ${envName}。将默认为生产环境。`);
      Environment.current = Environments.Prod;
  }
};

/**
 * 根据当前浏览器主机自动检测并设置环境。
 * 这通常在应用初始化时调用一次。
 * @param {string} [host=''] - 浏览器主机名，默认为 window.location.host。
 */
const autoDetectEnvironment = (host = '') => {
  const currentHost = host || window.location.host;

  if (isEnv(currentHost, ENVS.LOCAL)) {
    // 如果有 Local 环境，可以在这里设置
    // Environment.current = Environments.Local;
    return ENVS.LOCAL;
  }
  if (isEnv(currentHost, ENVS.SANDBOX)) {
    Environment.current = Environments.Sandbox;
    return ENVS.SANDBOX;
  }
  // 默认设置为生产环境
  Environment.current = Environments.Prod;
  return ENVS.PROD;
};

// 应用启动时自动检测一次环境
autoDetectEnvironment();

export { Environment, setEnvironmentByName, autoDetectEnvironment, ENVS };

代码解析：

• ENVS：定义了环境的唯一标识符。
• Environments：包含每个环境的详细配置，如apiHost和apiBase。
• Environment.current：一个全局对象，始终指向当前激活的环境配置。
• isEnv：辅助函数，用于根据主机名匹配环境（例如，sandbox.example.com）。
• setEnvironmentByName：核心函数，允许我们通过传递环境名称来显式地切换当前环境。
• autoDetectEnvironment：在应用启动时，根据window.location.host自动判断并设置初始环境。

3. 集成UI切换器

在前端组件中，我们可以导入 Environment 和 setEnvironmentByName，并使用React的状态管理来响应UI切换器的操作。

// App.js (React 组件示例)
import React from "react";
import { Switch, Text } from '@chakra-ui/react'; // 假设使用Chakra UI
import { Environment, setEnvironmentByName } from "./environment";

function App() {
  // 使用当前环境的名称初始化状态
  const [currentEnvName, setCurrentEnvName] = React.useState(Environment.current.name);

  // 根据当前环境名称判断Switch的checked状态
  const isSandboxMode = currentEnvName === Environments.Sandbox.name;

  const handleToggleChange = () => {
    const nextEnvName = isSandboxMode ? Environments.Prod.name : Environments.Sandbox.name;
    setEnvironmentByName(nextEnvName); // 切换环境
    setCurrentEnvName(Environment.current.name); // 更新组件状态
  };

  return (
    

      
环境切换示例
      

        
          {currentEnvName}
        
        
      
      
当前激活的API主机: {Environment.current.apiHost}

							

								
								

									TTSMaker
									
TTSMaker是一个免费的文本转语音工具，提供语音生成服务，支持多种语言。
								
								下载 
							
						
      
当前激活的API基础路径: {Environment.current.apiBase}
      {/* 其他组件和API调用将使用 Environment.current */}
    
  );
}

export default App;

代码解析：

• useState(Environment.current.name)：组件状态currentEnvName存储当前环境的名称，以便在UI中显示。
• handleToggleChange：当Switch组件状态改变时触发。它会调用setEnvironmentByName来更新全局的Environment.current，然后更新组件自身的currentEnvName状态，从而触发UI重新渲染。

4. 封装API请求

为了确保所有API请求都使用当前激活的环境配置，建议创建一个API服务类或模块来封装所有的网络请求。

创建一个名为 api.js（或 api.ts）的文件：

// api.js
import axios from "axios"; // 假设使用axios
import { Environment } from "./environment";

export class Api {
  /**
   * 获取当前环境的完整基础URL。
   * @returns {string} 完整的API基础URL。
   */
  static getBaseUrl() {
    const currentEnv = Environment.current;
    if (!currentEnv || !currentEnv.apiHost || !currentEnv.apiBase) {
      console.error("环境配置不完整，无法获取API基础URL。");
      return ""; // 或者抛出错误
    }
    return `${currentEnv.apiHost}${currentEnv.apiBase}`;
  }

  /**
   * 发送GET请求。
   * @param {string} path - API路径（不包含基础URL）。
   * @param {object} config - Axios请求配置。
   * @returns {Promise} Axios响应数据。
   */
  static get(path, config) {
    const url = `${Api.getBaseUrl()}${path}`;
    return axios.get(url, config);
  }

  /**
   * 发送POST请求。
   * @param {string} path - API路径。
   * @param {object} data - 请求体数据。
   * @param {object} config - Axios请求配置。
   * @returns {Promise} Axios响应数据。
   */
  static post(path, data, config) {
    const url = `${Api.getBaseUrl()}${path}`;
    return axios.post(url, data, config);
  }

  // 可以根据需要添加其他HTTP方法，如 put, delete 等
}

代码解析：

• Api.getBaseUrl()：此静态方法是关键。它动态地从Environment.current中获取apiHost和apiBase，并组合成完整的API基础URL。
• Api.get(), Api.post() 等：这些方法使用Api.getBaseUrl()来构建完整的请求URL，确保每次请求都指向当前激活的环境。

5. 调用API

现在，在任何需要进行API调用的地方，只需导入 Api 类并使用其方法即可。

// customerService.js (或任何其他服务文件)
import { Api } from "./api";

/**
 * 获取所有客户数据。
 * @param {number} rows - 每页行数。
 * @param {number} page - 页码。
 * @param {string} token - 认证令牌。
 * @returns {Promise} 客户数据。
 */
const getAllCustomers = async (rows, page, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  try {
    const response = await Api.get(
      `/customer/paginate-customer?page=${page}&rows=${rows}`,
      config
    );
    return response.data;
  } catch (error) {
    console.error("获取客户数据失败:", error);
    throw error;
  }
};

export { getAllCustomers };

代码解析：

• getAllCustomers函数现在直接调用Api.get()，而不再硬编码或从import.meta.env中获取URL。
• 当UI中的切换器改变环境时，Environment.current会更新，Api.getBaseUrl()将自动返回新的基础URL，从而使后续的Api.get()调用指向新的API端点。

6. 注意事项与最佳实践

• 安全性： 本教程侧重于前端运行时环境切换。对于敏感信息（如API密钥），应始终在后端管理或通过安全的CI/CD流程注入，而不是直接暴露在前端代码中。
• 错误处理： 在API客户端和实际调用API的函数中加入健壮的错误处理机制。
• 初始加载： 确保autoDetectEnvironment()在应用启动时尽早被调用，以设置正确的初始环境。
• UI反馈： 在UI中清晰地显示当前激活的环境，以便用户了解他们正在与哪个后端交互。
• 状态持久化： 如果希望用户刷新页面后环境设置仍然有效，可以将当前环境名称存储在localStorage或sessionStorage中，并在autoDetectEnvironment或组件初始化时读取。
• TypeScript支持： 如果使用TypeScript，可以为Environments和Environment.current定义接口，以获得更好的类型检查和开发体验。
• 测试： 在不同环境下充分测试应用，确保所有功能都能正常工作。

7. 总结

通过建立一个独立的环境配置管理模块和一个统一的API客户端，我们可以优雅地在前端应用中实现沙盒与生产环境的动态切换。这种方法不仅提高了开发和测试的灵活性，也为需要多环境演示的应用提供了强大的支持。它将环境配置与业务逻辑解耦，使得代码更加清晰、可维护，并能轻松应对未来环境配置的扩展。