React后台管理（二）-- 多环境配置

---

前言

本章主要讲react如何进行多环境配置，使用env-cmd

---

一、安装env-cmd

npm install --save-dev env-cmd

二、不同环境配置

1.在项目根目录中创建.env文件，储存不同环境变量,如下

.env.mock

HOST=0.0.0.0
PORT=7777
REACT_APP_MODE=mock
# 测试环境  
REACT_APP_API=
# 标识   
REACT_APP_MARK=
# 文件资源前置IP
REACT_APP_FILE=

.env.development

HOST=0.0.0.0
PORT=7777
REACT_APP_MODE=development
# 测试环境  
REACT_APP_API=http://xxxxx
# 标识  
REACT_APP_MARK='/api'
# 文件资源前置IP
REACT_APP_FILE=http://xxxxx

.env.test

HOST=0.0.0.0
PORT=7777
REACT_APP_MODE=test
# 测试环境  
REACT_APP_API=http://xxxxx
# 标识   
REACT_APP_MARK='/api'
# 文件资源前置IP
REACT_APP_FILE=http://xxxxx

2. 通过process.env获取

3. 在package.json中使用env-cmd库

在启动应用程序之前加载环境变量文件

  "scripts": {
    "start": "craco start",
    "start:test": "env-cmd -f .env.test craco start",
    "start:dev": "env-cmd -f .env.development craco start",
    "start:mock": "env-cmd -f .env.mock craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

---

总结

下一篇讲【路由配置以及权限】。请密切关注本栏目，会实时更新内容！