在使用 React 进行项目开发时，针对开发、测试、生产等不同环境，如何配置并打包出各自对应的不同后端 API 域名？
考察说明
考察 React 项目多环境管理与构建配置能力，重点在于环境变量与构建工具的结合使用。
回答思路
- 【回答框架 1】React 项目通常使用环境变量来区分不同环境。在项目根目录创建 .env.development、.env.production 等文件，内部以 REACT_APP_ 前缀定义变量，如 REACT_APP_API_URL=https://dev.api.com。
- 【回答框架 2】以 Create React App 为例，构建时通过 npm run build 或 npm start 自动加载对应环境的 .env 文件。生产构建使用 .env.production，开发启动使用 .env.development，未指定时则使用 .env。
- 【回答框架 3】在代码中通过 process.env.REACT_APP_API_URL 读取变量，替换硬编码的域名。例如 axios.create({ baseURL: process.env.REACT_APP_API_URL })。
- 【回答框架 4】若使用 Vite，则使用 import.meta.env.VITE_API_URL，并创建 .env.development 和 .env.production 文件，构建命令 vite build 会依据模式加载对应变量。
- 【回答框架 5】对于更复杂的场景，可引入 dotenv 或自定义构建脚本，在构建前动态生成环境文件，实现按需打包不同域名。
- 【关键点 1】通过 .env 系列文件与构建工具配合，可从代码中解耦环境相关域名。
- 【关键点 2】使用 process.env.REACT_APP_ 或 import.meta.env.VITE_ 读取环境变量，避免硬编码。
- 【关键点 3】构建命令会自动选择对应环境的变量文件，实现不同环境打包不同域名。
- 【易错点 1】切勿在代码中直接书写域名，否则无法随环境切换。
- 【易错点 2】环境变量名必须使用正确前缀（CRA 为 REACT_APP_，Vite 为 VITE_），否则无法被注入。
- 【易错点 3】注意敏感信息不要放入前端环境变量，因其会暴露在客户端代码中。