一.需求

在开发过程中,有时前端连接后台时,并不是一个后台,而是很多,即后台有分工。
那如果在项目上线时,我需要修改调用接口时连接的后台服务器,该怎样修改,此时页面中存在很多个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)=>{........})
Logo

前往低代码交流专区

更多推荐