vue设置公有全局的后台服务器ip(接口调用)

一.需求

在开发过程中，有时前端连接后台时，并不是一个后台，而是很多，即后台有分工。
那如果在项目上线时，我需要修改调用接口时连接的后台服务器，该怎样修改，此时页面中存在很多个ip地址+接口地址
思路1：
————笨办法：挨个挨个的修改每一个接口连接的ip，直到完成为止
————————缺陷:那如果以后还需要修改后台ip呢，仍然还是这样一对一修改？？？？——太麻烦了
思路2:
————设置全局ip，进行调用，之后只需要修改设置全局ip的文件即可——简单，快捷，不容易错

二.实现过程

1.书写有关ip的js文件
——即，将ip作为全局对象/变量/属性/方法，然后进行暴露
创建一个api.js

const http='http://xxx.xxx.xxx/mis-web'     //需要使用的ip1+接口共有部分
const http1='http://xxx.xxx.xxx/mis-web'  //需要使用的ip2+接口共有部分

export default {    //将const创建的变量进行暴露，注意，暴露的必须是一个对象
    http,http1
}

2.将暴露的内容添加到vue的原型上，然后通过this进行调用

//配置全局api
import api from './Api/api.js'    //先引入文件
Vue.prototype.API=api;   //将引入的文件挂载到vue的原型中

3.进行使用

 this.axios.post(this.API.http+'/sys/mpTempLogin',{
          username:this.card
        }).then((res)=>{.......}).catch((err)=>{........})