react 中 process.env.REACT_APP_URL_API 未定义

发布于
2021-04-22

按照如下步骤配置dotenv-cli使用多环境，为何process.env.REACT_APP_URL_API显示未定义？

安装dotenv-cli：npm i dotenv-cli --save-dev

在根目录下添加.env.dev文件
REACT_APP_URL_API=http://dev.com
REACT_APP_URL_UPLOAD=http://upload.dev.com

在根目录下添加.env.sit文件
REACT_APP_URL_API=http://sit.com
REACT_APP_URL_UPLOAD=http://upload.sit.com

在根目录下添加.env.prod文件
REACT_APP_URL_API=http://prod.com
REACT_APP_URL_UPLOAD=http://upload.prod.com

修改package.json文件
{
  // ...
  "scripts": {
    "start": "dotenv -e .env.dev react-app-rewired start",
    "build:sit": "dotenv -e .env.sit react-app-rewired build",
    "build:prod": "dotenv -e .env.prod react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  // ...
}

在index.html中使用%REACT_APP_URL_API%
在js/jsx中：process.env.REACT_APP_URL_API