使用dotenv-cli 插件实现.evn环境的配置

结构

create-react-app 默认是支持多个环境配置文件的：

.env：默认。
.env.local：本地覆盖。除 test 之外的所有环境都加载此文件。

.env.development, .env.test, .env.production：设置特定环境。
.env.development.local, .env.test.local, .env.production.local：设置特定环境的本地覆盖。

1.安装dotenv-cli插件

yarn add dotenv-cli

2.在根目录创建 .env 文件

变量名必须以 REACT_APP 开头，单词大写，以 _下划线分割，.env变量名更改之后，项目必须重启才会生效。

.env

## 存储的userData
REACT_APP_userLocalStorageKey = userData
## 登陆页面
REACT_APP_loginPath = /login
## 默认首页
REACT_APP_homePath = /home
## 过期时间 2 小时
REACT_APP_ExpirationTime = 6

.env.dev

## 企业微信登录APPID
APP_ID='这是测试的appid'
## 域名请求接口
REACT_APP_API_PATH= http://gredapifz.wanziji.com/test

.env.prod

REACT_APP_APP_ID=这是生产环境的APP_ID
REACT_APP_API_PATH = http://gredapifz.wanziji.com/pro
GENERATE_SOURCEMAP = false

3.配置命令行

dotenv 直接将根目录下.env 结尾的文件中的变量添加到 process.env 上

dotenv -e 可以指定一些其他的.env 文件，将变量添加到 process.env 上

"scripts": {
    "dev": "dotenv -e .local.single.env -e .env.dev react-app-rewired start",
    "build": "dotenv -e .env.prod react-app-rewired build",
    "dev:test": "dotenv -e .local.single.env -e .env.dev react-app-rewired start",
    "dev:prod": "dotenv -e .local.single.env -e .env.prod react-app-rewired start",
  },

"scripts": {
  "start": "dotenv -e .local.single.env -e .env.dev craco start",
  "build": "dotenv -e .local.single.env -e .env.prod craco build",
  "build:dev": "dotenv -e .local.single.env -e .env.dev craco build",
  "dev:test": "dotenv -e .local.single.env -e .env.dev craco test",
  "dev:prod": "dotenv -e .local.single.env -e .env.prod craco test",
  "eject": "react-scripts eject"
},

4.通过 process.env.变量名的方式获取变量

process.env

5.注意路径变量必须得用VUE_APP或者REACT_APP开头

## 主域名请求接口
REACT_APP_API_PATH = http://hospital.test.diabetes.rnhos.com
## 项目地址
REACT_APP_LOCATION_HREF = http://hospital.test.rnhos.com

6.配置env参数之后需要重新启动

参考链接

uni-app如何配置多环境？

React使用.env文件配置多环境

结构