axios获取发起请求的地址 vue_vue中axios设置公共请求地址

先描述一下场景：vue项目，后台请求地址在配置文件中已经设置为全局的，每次变动只需修改一次即可，然后要部署到三台服务器。

然后：修改服务器地址，打包，部署 --> 修改服务器地址，打包，部署 --> 修改服务器地址，打包，部署 (3次 重复的工作量)

那么当我们需要部署多台服务器的时候，怎么避免减少重复性的工作呢？

下面介绍一种方法来减少任务量：

1、新建配置文件(config.js)

如果是vue2.0的脚手架搭建的项目就在static新建一个配置文件，如果是vue3.0的脚手架搭建的项目，就在public下新建个配置文件，只要保证build后不会被打包即可。

文件内容：服务器的ip地址、端口号地址、接口请求地址

window.dasConfig = {

ip: '1.2.3.4',

port: 9000,

dbSourceApi: 'api/DbSourceManage',

jobMetaApi: 'api/JobMetaManage'

};

2、index.html引用配置文件

index

3、组件中请求接口使用：

init() {

// 请求后端数据,查询元数据

this.axios({

method: 'get',

url: `http://${window.dasConfig.ip}:${window.dasConfig.port}/${window.dasConfig.jobMetaApi}/GetAllJob`

})

.then(response => {

console.log(response);

})

.catch(error => {

console.log(error);

});

}

4、打包

之后只需要打包一次，然后打包后的static文件夹中会保留当前配置文件，然后对应服务器进行修改即可。

but，可能很多人没有这种需求，只需要打包配置一台服务器即可，可以看下另一篇文章，有详细教程

如有问题，请指出，接受批评。