默认vue项目中已经使用vue-cli生成，安装axios，基于element-ui开发，axiosconfig目录和api目录是同级，主要记录配置的相关。

1. 在axiosconfig目录下的axiosConfig.js

importVuefrom'vue'importaxiosfrom'axios'importqsfrom'qs'import{Message,Loading}from'element-ui'//响应时间axios.defaults.timeout=5*1000//配置cookie//axios.defaults.withCredentials=true//配置请求头axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8'//静态资源Vue.prototype.$static=''//配置接口地址axios.defaults.baseURL=''varloadingInstance//POST传参序列化(添加请求拦截器)axios.interceptors.request.use(config=>{loadingInstance=Loading.service({lock:true,text:'数据加载中，请稍后...',spinner:'el-icon-loading',background:'rgba(0,0,0,0.7)'})if(config.method==='post'){config.data=qs.stringify(config.data)}returnconfig},err=>{loadingInstance.close()Message.error('请求错误')returnPromise.reject(err)})//返回状态判断(添加响应拦截器)axios.interceptors.response.use(res=>{if(res.data.code===200){loadingInstance.close()returnres}else{loadingInstance.close()Message.error(res.data.msg)}},err=>{loadingInstance.close()Message.error('请求失败，请稍后再试')returnPromise.reject(err)})//发送请求exportfunctionpost(url,params){returnnewPromise((resolve,reject)=>{axios.post(url,params).then(res=>{resolve(res.data)},err=>{reject(err.data)}).catch(err=>{reject(err.data)})})}exportfunctionget(url,params){returnnewPromise((resolve,reject)=>{axios.get(url,{params:params}).then(res=>{resolve(res.data)}).catch(err=>{reject(err.data)})})}

2.在api目录下的index.js

importuserfrom'./api1.js'importactivefrom'./api2.js'exportdefault{api1,api2}

3.在api目录下的api.js

import{post}from'../axiosconfig/'exportdefault{regist(params){returnpost('/users/api/regist',params)}}

4.main.js配置

importapifrom'./api/'Vue.prototype.$api=api

5.登录组件

doLongin(){letparams={}this.$api.api1.login(params).then(res=>{console.log(res)})}

6.注册组件中

doRegist(){letparams={}this.$api.api2.regist(params).then(res=>{console.log(res)})}