Vue中使用API代理接口

首先就是要创建一个api.js的文件，然后再创建每个模块所需要接口的js文件。
比如我有一个登陆的页面需要代理一个登陆的接口
首先就是创建一个login.js的文件
在里面配置一下信息
用export default暴露一个对象
把接口信息用这个对象存储

export default{
    loginYanZheng:"/healthproject/admin/user/login"//后端角色登录
}

然后在api.js文件中引用这个文件再暴露出去

import login from "./login.js"
export default{
    login
}

然后再在main.js文件中应用api.js文件

//API全局代理
import api from './api/api.js'

然后设置axios的默认请求地址

Axios.defaults.baseURL="http://XX.XXX.XX.XXX";

然后再把Vue实例的$api原型指向api.js这个文件

Vue.prototype.$api = api;

那么如果你想使用这个代理的接口怎么做呢

this.$axios.post(this.$api.hospital.xiuGai,this.xiugaiObj,
                   {
                       transformRequest:[
                           function(data){
                               let params = "";
                               var arr = [];
                               for(var key in data){
                                   arr.push(key+"="+data[key]);
                               }
                               params = arr.join("&");
                               return params;
                           }
                       ] }).then((res) =>{
                   console.log(res);
                   this.xiugaiyiyuanxingxi = false
                   this.getAllYiYuan()
               })

其中this.$api就是之前添加的api代理,hospital是api.js中暴露的对应的模块的js文件名，xiuGai是代理接口的键名

这样配置怕是有点麻烦，而且每次打包还要手动更改，直接根目录创建.env等文件，添加接口域名，axios这里还需要做进一步处理，直接使用返回值就可以了