ReactJS项目中是否可在.env文件中添加if/else条件判断逻辑？

简单说：不行。.env文件本质上就是个纯静态的键值对配置文件，它不支持任何条件判断、变量运算或者逻辑分支——你只能在里面定义KEY=VALUE形式的简单字符串，没法像写代码那样搞if/else或者三元表达式。

针对你想要实现的配置逻辑，这里有两种靠谱的实现方式：

方式1：在React代码中处理逻辑（最推荐） #

React会自动把.env里前缀为REACT_APP_的变量注入到客户端代码中，所以你可以先在.env里定义基础变量：

REACT_APP_SSL=${SSL} # 这里的${SSL}是系统环境变量，会被shell替换，无值时为空字符串

然后在你的React代码里读取这个变量，再完成逻辑计算：

// 把SSL变量转成布尔值，默认设为false
const isSSL = process.env.REACT_APP_SSL === 'true' || false;
// 根据SSL状态确定协议
const protocol = isSSL ? 'https' : 'http';
// 拼接最终的服务器地址
const serverUrl = `${protocol}://api/logistics`;

这种方式逻辑清晰，完全符合React的开发模式，也不用额外依赖工具，是最省心的选择。

方式2：用脚本预处理.env文件（适合复杂场景） #

如果你一定要在构建前就把最终变量写入.env，可以用shell脚本或npm钩子做预处理。比如在package.json里添加预启动/预构建脚本：

{
  "scripts": {
    "prestart": "if [ \"$SSL\" = \"true\" ]; then echo \"REACT_APP_SERVER_URL=https://api/logistics\" > .env.local; else echo \"REACT_APP_SERVER_URL=http://api/logistics\" > .env.local; fi",
    "start": "react-scripts start"
  }
}

这里用prestart钩子在启动项目前，根据系统环境变量SSL的值，把最终的REACT_APP_SERVER_URL写入.env.local（这个文件会覆盖.env的同名变量，且不会被git提交，适合本地自定义）。

不过这种方式需要你熟悉shell脚本，维护成本也比代码处理高，所以除非有特殊需求，更推荐第一种方案。

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