vue打包之后配置统一请求地址

Posted 2023-04-04

参考技术A 在public文件夹下新建一个config.js文件,并添加如下内容

在index.html文件中引入

在封装的网络请求文件中设置默认请求地址

打包后的文件结构如下，正式环境中直接修改此配置即可

vue打包之后动态修改请求接口方法

1.可以根据自身情况封装获取配置文件接口信息

1.1我在static中新建一个config.json配置文件

{
	"DEV_URL":"/apis",//开发模式
	"BUILD_URL": "/apis"//打包之后接口
}

2.我在每次请求之前都会获取配置文件，你也可以只获取一次做下判断即可　　

//获取配置文件
async function startApp() {
	let API_URL
	if(process.env.NODE_ENV==‘development‘){
		let data=await Vue.http.get(‘/static/config.json‘)
		API_URL=JSON.parse(data.bodyText).DEV_URL
	}else{
		let data=await Vue.http.get(‘./static/config.json‘)
		API_URL=JSON.parse(data.bodyText).BUILD_URL
	}
	return API_URL
}

3.我封装的请求接口

async function doGet(url, req, successCallback, errorCallback) {
	let service_url=await startApp() 
	req=filterUndefined(req)
	// 每次切换页面时，调用进度条
	NProgress.start();
	Vue.http.get(service_url + url,{params:req}, {
		emulateJSON: true, //允许跨越
	}).then(function(response) {
		// 在即将进入新的页面组件前，关闭掉进度条
		NProgress.done()
		// 响应成功回调
		successCallback && successCallback(response.data);
	}, function(error) {
		// 在即将进入新的页面组件前，关闭掉进度条
		NProgress.done()
		// 响应错误回调
		errorCallback && errorCallback(error)
	});
}