vue使用axios 配置自定义接口地址

api.js 方法

import Vue from 'vue'

import axios from 'axios';
Vue.prototype.$axios = axios;
export default {

apiUrl:'',//本地测试后台接口地址前缀


  ajax:function(options){
  var defaults = {
  method:'POST',
  url : "",
data : "",
success : ""
};
var $this = this

var opts = this.replaceDf(defaults,options)//将参数替换默认参数

         opts.url = $this.apiUrl+opts.url//接口地址前缀和后缀拼接在一起

var token = localStorage.getItem('isLogin')||''
var timestamp=new Date().getTime() // 传时间戳  添加时间戳 避免读取缓存
        axios.defaults.headers.common['Authentication'] = token;//增加token到公共 头部
if(opts.method=="GET"){
axios.get(opts.url+"?"+timestamp, {
    params: opts.data
  })
  .then(function (response) {
  if(response.data.code==9006||response.data.code==1003||response.data.code==1002){  // 未登录
    localStorage.setItem('isLogin','')
    window.location.href='#/login'
  }else{
    opts.success(response.data);
  }
      
  })
  .catch(function (error) {
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        error.message = '请求错误'
        break
      case 401:
        error.message = '未授权，请登录'
        break
      case 403:
        error.message = '拒绝访问'
        break
      case 404:
        error.message = '未找到访问地址'
        break
      case 408:
        error.message = '请求超时'
        break
      case 500:
        error.message = '服务器内部错误'
        break
      case 501:
        error.message = '服务未实现'
        break
      case 502:
        error.message = '网关错误'
        break
      case 503:
        error.message = '服务不可用'
        break
      case 504:
        error.message = '网关超时'
        break
      case 505:
        error.message = 'HTTP版本不受支持'
        break
      default:
    }
  }
     opts.success(error);
  });
}
else if(opts.method=="POST"){
axios.post(opts.url+"?"+timestamp, opts.data)
  .then(function (response) {
  if(response.data.code==9006||response.data.code==1003||response.data.code==1002){  // 未登录
      localStorage.setItem('isLogin','')
      window.location.href='#/login'
  }else{
    opts.success(response.data);
  }
    
  })
  .catch(function (error) {
    if (error && error.response) {
    switch (error.response.status) {
      case 400:
        error.message = '请求错误'
        break
      case 401:
        error.message = '未授权，请登录'
        break
      case 403:
        error.message = '拒绝访问'
        break
      case 404:
        error.message = '未找到访问地址'
        break
      case 408:
        error.message = '请求超时'
        break
      case 500:
        error.message = '服务器内部错误'
        break
      case 501:
        error.message = '服务未实现'
        break
      case 502:
        error.message = '网关错误'
        break
      case 503:
        error.message = '服务不可用'
        break
      case 504:
        error.message = '网关超时'
        break
      case 505:
        error.message = 'HTTP版本不受支持'
        break
      default:
    }
  }
     opts.success(error);
  });
}

  },
  replaceDf:function(obj1,obj2){    //**把obj2中的的属性值赋值给obj1对应的属性
for(var key in obj2){
   obj1[key]=obj2[key]
}
return obj1;
  } 

}

mian.js

import Vue from 'vue';
import App from './App';
import router from './router';
import axios from 'axios';
import api from './assets/js/api'
// 将API方法绑定到全局
Vue.prototype.$api = api
Vue.prototype.$axios = axios;
new Vue({
    router,
    render: h => h(App)

}).$mount('#app');

调用方式

getGame(){//获取游戏
var self=this;
self.$api.ajax({
url:'',//这里是你接口地址后缀
method:'GET',
success(data){
if(data.code==0){

}else{

}
}
})
},