webpack(create-react-app=>dotenv.cli)针对不同环境使用不用接口地址的适配问题

项目中使用了create-react-app搭建的项目，package.json中用的react-app-rewired方式，由于webpack没有被释放，不能在webpack的配置文件直接配置适配，所以针对build 的dev，test, production环境取不同的接口地址，就不是很方便。

（create-react-app默认情况下，webpack的配置是对dev ，production环境，并没有test。）

写好各个环境的配置文件

首先，我们可以写好每个环境下的配置文件(分别在根目录创建.env.development和.env.production文件)。

# env.production ==> 生成环境
REACT_APP_NODE_ENV ='production'

请求接口用的是axios，针对不同的环境设置不用baseurl即可, baseurl.js如下：

let CTX_ = 'http://120.24.94.239:8051/zft_pc/';// 预发布环境
if (process.env.REACT_APP_NODE_ENV === 'production') {
    CTX_ = 'http://120.79.187.162:8051/zft_pc/';// 微服务（线上）
};
console.log(process.env, process.env.REACT_APP_NODE_ENV, CTX_);

输出结果如下:

{NODE_ENV: "development", PUBLIC_URL: "", REACT_APP_NODE_ENV: "production"}
"production" "http://120.79.187.162:8051/zft_pc/"

剩余的问题就是如何得到process.env.REACT_APP_ENV 的值。方法是，不同的环境使用不同的build方式》

dev 环境build 的话用  npm run build:dev
prodution 环境build 的话 用  npm run build:prodution
test  环境build 的话 用  npm run build:test

package.json文件简略如下：

  "scripts": {

    "start": "react-app-rewired start",

    "build": "react-app-rewired build",

    "build:pro": "dotenv -e .env.pro react-app-rewired build",

    "test": "react-app-rewired test --env=jsdom",

    "eject": "react-scripts eject"

  },

使用了dotenv-cli 与  env文件
dotenv-cli包的作用是可以使用.env文件指定的变量，然后process.env对象就有该变量的值了。
下载链接：http://npm.taobao.org/package/dotenv-cli