项目中使用了create-react-app搭建的项目，package.json中用的react-app-rewired方式，由于webpack没有被释放，不能在webpack的配置文件直接配置适配，所以针对build 的dev，test, production环境取不同的接口地址，就不是很方便。（create-react-app默认情况下，webpack的配置是对dev ，production环境，并没有test。）
请求接口用的是axios，针对不同的环境设置不用baseurl即可, baseurl.js如下：
let BASE_URL = '';
if(process.env.REACT_APP_ENV === 'development') {
BASE_URL = 'http://开发环境/'
}
else if(process.env.REACT_APP_ENV === 'test'){
BASE_URL = 'http://测试环境/'
}
else if(process.env.REACT_APP_ENV === 'production'){
BASE_URL = 'http://生产环境/'
}
export default BASE_URL
剩余的问题就是如何得到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文件简略如下：
"start": "dotenv -e .env.development react-app-rewired start ",
"test": "react-app-rewired test",
"eject": "react-scripts eject",
"build:dev": "dotenv -e .env.dev react-app-rewired build",
"build:production": "dotenv -e .env.production react-app-rewired build",
"build:test": "dotenv -e .env.test react-app-rewired build"
使用了dotenv-cli 与 env文件
dotenv-cli包的作用是可以使用.env文件指定的变量，然后process.env对象就有该变量的值了。
（dotenv使用方式http://npm.taobao.org/package/dotenv-cli）
env文件可以按照如下方式：
例如在.env.development文件中：
REACT_APP_ENV=development
网上的有用资料1 https://blog.csdn.net/songshu92/article/details/99567343#%E5%A4%9A%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE
2 webpack vue-cli2 区分测试环境和线上环境 https://www.jianshu.com/p/30d30d2835b2
网友评论