功能背景
例如想要在react也要实现不同环境使用不同的api接口地址这样的想法,那么就需要根据命令自动区分环境了。
代码实现
比如我这又三种环境,那么创建三个文件,如图:
分别是dev:开发环境,formal:UAT环境,prod:正式环境
env.dev
REACT_APP_BASE_URL=http://xxxxt/v1_0
REACT_APP_ENV=dev
 
env.formal
REACT_APP_BASE_URL=https://test.xxxxxx.com.cn
REACT_APP_ENV=formal
 
env.prod
REACT_APP_BASE_URL=https://prod.xxxxxx.com.cn
REACT_APP_ENV=prod
 
然后在package.json配置运行命令/打包命令
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "start:dev": "cross-env NODE_ENV=dev npm run start",
    "start:formal": "cross-env NODE_ENV=formal npm run start",
    "start:prod": "cross-env NODE_ENV=prod npm run start",
    "build:dev": "cross-env NODE_ENV=dev npm run build",
    "build:formal": "cross-env NODE_ENV=formal npm run build",
    "build:prod": "cross-env NODE_ENV=prod npm run build",
  },
 
运行项目之后,就可以打印以下
console.log('看看环境',process.env.REACT_APP_BASE_URL),
 
比如目前我运行的是
npm run start:formal

注意:对于如何分环境运行不同的打包配置文件,这个还没研究,日后再弄,如果各位有分享可以粘贴评论区,一起学习。谢谢,有问题欢迎指正。



















