react项目webpack4配置正式环境接口地址和测试环境接口地址

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_45115705/article/details/101234994

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接口地址就是我们对应的正式地址和测试地址了

PS：未来的你，一定会感谢今天拼命努力的自己！