这次给大家带来怎样对vue项目api接口进行管理，对vue项目api接口进行管理的注意事项有哪些，下面就是实战案例，一起来看一下。
默认vue项目中已经使用vue-cli生成，安装axios，基于element-ui开发，axiosconfig目录和api目录是同级，主要记录配置的相关。
1. 在axiosconfig目录下的axiosconfig.js
import vue from 'vue'import axios from 'axios'import qs from '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 = ''var loadinginstance// 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)  }  return config }, err => {  loadinginstance.close()  message.error('请求错误')  return promise.reject(err) })// 返回状态判断(添加响应拦截器)axios.interceptors.response.use( res => {  if (res.data.code === 200) {   loadinginstance.close()   return res  } else {   loadinginstance.close()   message.error(res.data.msg)  } }, err => {  loadinginstance.close()  message.error('请求失败，请稍后再试')  return promise.reject(err) })// 发送请求export function post (url, params) { return new promise((resolve, reject) => {  axios   .post(url, params)   .then(    res => {     resolve(res.data)    },    err => {     reject(err.data)    }   )   .catch(err => {    reject(err.data)   }) })}export function get (url, params) { return new promise((resolve, reject) => {  axios   .get(url, {    params: params   })   .then(res => {    resolve(res.data)   })   .catch(err => {    reject(err.data)   }) })}
2. 在api目录下的index.js,api1.js,api2.js
api1.jsimport { post } from '../axiosconfig/'export default {  login(params) {    return post('/users/api/login', params)  }}api2.jsimport { post } from '../axiosconfig/'export default {  regist(params) {    return post('/users/api/regist', params)  }}index.jsimport user from './api1.js'import active from './api2.js'export default { api1, api2}
3. main.js 配置
import api from './api/'vue.prototype.$api = api
4. 在组件中使用
登录组件中dolongin() { let params={} this.$api.api1.login(params).then(res => {  console.log(res) })}注册组件中doregist() { let params={} this.$api.api2.regist(params).then(res => {  console.log(res) })}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样在项目中使用js装饰器函数
怎样操作echarts节点显示动态数据
以上就是怎样对vue项目api接口进行管理的详细内容。