本文详解如何在构建阶段将环境变量静态注入 react 应用（非运行时），适用于嵌入式场景（如 reactdom 渲染于 angular 中），重点说明 .env 文件规范、构建脚本配置及变量引用方式。
本文详解如何在构建阶段将环境变量静态注入 react 应用（非运行时），适用于嵌入式场景（如 reactdom 渲染于 angular 中），重点说明 .env 文件规范、构建脚本配置及变量引用方式。
React 默认仅在构建时（而非运行时）解析 process.env.REACT_APP_* 开头的环境变量，并将其内联为字符串常量。这意味着：变量必须在执行 npm run build 时已确定，且不能是 .js 格式的动态配置文件——这正是你当前使用 ./.env.development.js 导致失败的根本原因。
✅ 正确做法：使用标准 .env 文件格式
React 官方及主流构建工具（如 Create React App、Vite、甚至自定义 Webpack/ESBuild 配置）均要求环境变量定义在纯文本 .env 文件中，且需遵循以下规则：
- 文件名必须为 .env、.env.development、.env.production 等标准命名；
- 每行格式为 KEY=VALUE，不支持 JavaScript 语法、require()、module.exports 或变量插值；
- 只有以 REACT_APP_ 开头的变量会被暴露到客户端代码中（安全限制）；
- 值若含空格或特殊字符，建议用单引号包裹（如 REACT_APP_API_URL='https://api.example.com'）。
示例 .env.development 文件：
REACT_APP_VERSION=1.2.0 REACT_APP_API_URL=http://localhost:10500 REACT_APP_TITLE=User Dashboard
? 构建脚本配置（适配你的 env-cmd 场景）
你当前的 build 脚本试图加载 .env.development.js，这是无效的。请改为：
"scripts": {
"build": "react-scripts build",
"build:dev": "env-cmd -f .env.development react-scripts build",
"build:prod": "env-cmd -f .env.production react-scripts build"
}
⚠️ 注意：
- 若未使用 create-react-app（即无 react-scripts），而是基于 microbundle-crl（如你原始配置），则需确保其插件支持 .env 注入（例如通过 @rollup/plugin-replace + dotenv 手动读取）。但更推荐统一迁移到标准 CRA 或 Vite 工具链，避免兼容性陷阱。
- env-cmd 的 -f 参数必须指向 .env.* 文本文件，而非 .js 文件；否则它无法解析 JS 模块导出。
? 在代码中安全使用环境变量
所有 REACT_APP_* 变量在构建后会转为字面量字符串，可直接访问：
// 示例：构造请求配置
const apiConfig = {
baseUrl: process.env.REACT_APP_API_URL || 'https://fallback.example.com',
timeout: 5000,
};
// 示例：动态传入 ReactDOM.render（适配 Angular 宿主）
ReactDOM.render(
<app version="{process.env.REACT_APP_VERSION}" apiurl="{process.env.REACT_APP_API_URL}"></app>,
document.getElementById('react-root')
);
? 关键提醒：process.env.NODE_ENV 和 process.env.REACT_APP_* 是唯一可在浏览器端访问的环境变量；其他变量（如 API_KEY）不会被注入，防止敏感信息泄露。
✅ 验证是否生效
构建完成后，检查生成的 build/static/js/main.*.js 文件中是否存在类似 baseUrl:"http://localhost:10500" 的硬编码字符串——若存在，说明注入成功；若仍为 process.env.REACT_APP_API_URL 字面量，则说明构建工具未正确读取 .env 文件，请检查路径、命名及构建工具兼容性。
综上，摒弃 .js 环境配置，严格采用 .env 文本格式 + 标准构建流程，即可实现环境变量在构建阶段的可靠注入，完美适配嵌入式 React 应用场景。
