您正在使用react-scripts构建应用程序。您可以在.env文件中定义环境变量。
对于在节点环境中通用的变量，可以在.env文件中定义它们
对于特定于development和production的变量，可以在.env.development和.env.production文件中定义它们
另外，请使用REACT_APP作为变量的前缀
完成此操作后，可以在package.json中添加脚本，以指定特定NODE_ENV的构建版本

"scripts": {
    "start": "react-scripts start",
    "build": "NODE_ENV=development react-scripts build",
    "build:prod": "NODE_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

然后您可以构建本地生产应用程序，例如

yarn run build:prod

它将使用生产环境变量
在create react app documentation上阅读更多信息

• • 以下步骤可能会有所帮助。请尝试：**

您也可以参考原始文件了解更多信息：
Adding Custom Environment Variables

• • 第一步：**

在项目根目录下创建.env文件
创建.env文件后的项目结构：

...
- build
- public
- src
    |----- App.js
    |----- index.js
- package.json
- .env
...

• • .env文件内部：（例如）需要前缀REACT_APP_!**

REACT_APP_URL_DEVELOPMENT=http://localhost:8000/api
REACT_APP_URL_PRODUCTION=https://productionDomain.com/api/

• • 第二步：**
• • 包. json文件：**

Scripts无需在package.json文件中进行更改：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://myWebsite.com",
  "dependencies": {
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

• • 第三步：**

最后，可以有条件地使用所创建的变量。

• • 示例：**

class Posts extends Component{
    ...

    componentDidMount(){

      // Finally, you can conditionally use the variables you created.
      const url = process.env.NODE_ENV === "development" ? process.env.REACT_APP_URL_DEVELOPMENT : process.env.REACT_APP_URL_PRODUCTION;

      axios.get(url)
        .then(res => { ... })
        .catch(err => { ... });

    }

    render(){
      return(
        ...
      )
    }
}

• • 常见问题部分：**

process.env是您的环境通过NodeJs提供的全局对象。因为我们的浏览器中没有NodeJS。但您可以使用create-react-app（默认包含webpack）初始化您的应用，然后执行上述步骤，从而访问NODE_ENV。更多详细信息如下：
有一个名为NODE_ENV的内置环境变量。您可以从process.env.NODE_ENV访问它。此变量根据您当前所处的模式而变化。当您运行npm start时，它等于development，当您运行npm test时，它等于test。当你运行npm run build时，它等于production。这个变量是特殊的，因为它可以用来根据你的模式访问不同的环境配置。

对于任何其他人有这个问题，但接受的答案不成功，试试这个。
1.安装env-cmd
1.在你的package.json中，像这样设置你的build命令中的env："build:staging": "env-cmd -f .env.<ENV_NAME> react-scripts build",
请注意，请确保项目的根目录中存在名为.env.<ENV_NAME>的文件

尝试

yarn build --mode your_env

安装“env-cmd”软件包
npm install --save-dev env-cmd
更新包.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "start:local": "env-cmd -f .env.local react-scripts start",
    "build:local": "env-cmd -f .env.local react-scripts build"
    "start:stage": "env-cmd -f .env.stage react-scripts start",
    "build:stage": "env-cmd -f .env.stage react-scripts build"
    "start:live": "env-cmd -f .env.live react-scripts start",
    "build:live": "env-cmd -f .env.live react-scripts build"
  },

运行、启动或生成您想要的环境

// Local environment
 npm run start:local
 npm run build:local
 
 // Stage environment
 npm run start:local
 npm run build:local
 
 // Live environment
 npm run start:live
 npm run build:live