欢迎关注微信公众号:【 全栈攻略 】
react官方脚手架创建的项目默认是隐藏webpack的配置的,我们要配置不同环境的不同通用请求接口地址,就要暴露webpack配置,执行命令
npm run eject
执行完之后,就会多c出下面几个文件
找到scripts目录下的build.js ,这个文件默认打包构建的正式环境的
复制一份build.js,并命名为testBuild.js,这个是我们配置为打包构建测试环境,并且把node全局process对象 process.env.NODE_ENV = ‘production’ 修改为 process.env.NODE_ENV = ‘development’;(叫什么名字无所谓)
在package.json文件中配置打包指令
正式环境和测试环境配置好了,接下来就给我们不同的环境配置不同的通用请求接口地址
// 创建axios实例
var instance = axios.create({
timeout: 1000 * 60,
baseURL: process.env.NODE_ENV === 'production'? '正式环境地址':'测试环境地址' // 环境地址
});
至此分别在终端输入命令
npm run build
构建正式环境
npm run testBuild
构建测试环境
我们的通用请求API接口地址就是我们对应的正式地址和测试地址了