.env文件中能否使用If Else语句？React动态配置URL需求

首先明确：.env文件不支持JavaScript的if else条件判断语法，它是纯键值对格式的静态配置文件，无法执行脚本逻辑，所以你之前写的代码完全不会生效。

针对你的两个需求——读取Windows环境变量、根据分支动态设置URL，提供两种可行方案：

方案一：使用多环境.env文件（推荐） #

React官方支持根据环境加载不同的.env文件，步骤如下：

1. 在项目根目录创建对应环境的.env文件：
   • .env.development：开发环境配置

     REACT_APP_BASE_URL=https://api.dev.myurl.com
     

   • .env.staging：预发布环境配置

     REACT_APP_BASE_URL=https://api.staging.myurl.com
     

   • .env.production：生产环境配置

     REACT_APP_BASE_URL=https://api.pro.myurl.com
     

2. 在package.json中配置不同环境的启动/构建脚本，借助cross-env兼容Windows和类Unix系统的环境变量设置：
   先安装依赖：

   npm install cross-env --save-dev
   

   修改scripts：

   "scripts": {
     "start:dev": "cross-env NODE_ENV=development react-scripts start",
     "start:staging": "cross-env NODE_ENV=staging react-scripts start",
     "build:prod": "cross-env NODE_ENV=production react-scripts build"
   }
   

   启动对应环境时，直接运行npm run start:dev或对应的脚本即可自动加载对应.env文件的配置。

方案二：在项目代码中做条件判断 #

如果不想维护多个.env文件，可以在代码中根据读取到的环境变量动态设置URL：

1. 在根目录的.env文件中读取Windows系统的ENV变量（Windows下引用系统环境变量用%变量名%）：

   REACT_APP_ENV=%ENV%
   

   若系统未设置ENV变量，也可以在启动时临时指定：
   • Windows命令行：set ENV=develop && npm start
   • Windows PowerShell：$env:ENV='develop'; npm start
2. 在项目中创建配置文件（比如src/config.js），根据环境变量判断设置URL：

   let BASE_URL = '';
   const currentEnv = process.env.REACT_APP_ENV || 'develop';
   
   switch(currentEnv) {
     case 'develop':
       BASE_URL = 'https://api.dev.myurl.com';
       break;
     case 'staging':
       BASE_URL = 'https://api.staging.myurl.com';
       break;
     case 'production':
       BASE_URL = 'https://api.pro.myurl.com';
       break;
     default:
       BASE_URL = 'https://api.dev.myurl.com';
   }
   
   export { BASE_URL };
   

3. 在组件或API请求中导入使用：

   import { BASE_URL } from './config';
   
   // 示例请求
   fetch(`${BASE_URL}/api/data`)
     .then(res => res.json())
     .then(data => console.log(data));
   

内容的提问来源于stack exchange，提问作者Dev. R