Create React App中.env文件变量复用写法正确性咨询

你的写法默认情况下是不生效的，因为Create React App（CRA）的环境变量加载机制本身不支持这种${变量名}的插值语法。下面详细解释原因和可行的解决方案：

为什么你的写法无效？ #

CRA在处理.env文件时，默认只会读取键值对并注入到客户端代码（仅包含REACT_APP_前缀的变量），但不会解析变量之间的引用。所以你设置B=${A}/new后，实际拿到的process.env.REACT_APP_B（如果B加了前缀的话）会是字符串"${A}/new"，而不是预期的"hello/new"。

另外要注意：CRA要求所有需要在客户端代码中访问的环境变量必须以REACT_APP_开头，比如REACT_APP_A=hello，否则这些变量不会被注入到你的应用中，这点很容易忽略。

可行的解决方案 #

方案1：在代码层面拼接变量（推荐，无需额外配置） #

既然.env里不能直接引用，你可以在代码中手动拼接变量值：

// 比如在组件或配置文件中
const combinedValue = `${process.env.REACT_APP_A}/new`;

这种方式简单直接，不需要修改CRA的默认配置，适合大多数场景。

方案2：通过自定义配置启用变量插值（适合复杂场景） #

如果你一定要在.env文件中实现变量复用，可以借助dotenv-expand扩展CRA的配置，步骤如下：

1. 安装所需依赖：

npm install dotenv-expand react-app-rewired --save-dev

2. 在项目根目录创建config-overrides.js文件，添加以下内容：

const dotenv = require('dotenv');
const dotenvExpand = require('dotenv-expand');

const env = dotenv.config();
dotenvExpand.expand(env);

module.exports = function override(config, env) {
  return config;
};

3. 修改package.json中的scripts命令，替换react-scripts为react-app-rewired：

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
}

4. 现在你就可以在.env文件中使用变量插值了，记得加上REACT_APP_前缀：

REACT_APP_A=hello
REACT_APP_B=${REACT_APP_A}/new

这样配置后，process.env.REACT_APP_B就能正确获取到"hello/new"的值了。

内容的提问来源于stack exchange，提问作者Beginner