解决：Vue使用过程axios使用时出现undefined以及跨域问题解决

前言

最近在自己学习Vue，寻思自己搭建一个小的管理类页面，来练练手，但是出现了一系列问题：

axios出现跨域问题。
axions全局注册后竟然无法使用。

正文

问题一

出现跨域问题需要我们自己进行配置：

第一步：在main.js中增加配置

import Vue from 'vue'
import App from './App'
import router from './router'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
import axios from "axios";
Vue.config.productionTip = false
Vue.use(ViewUI);
axios.defaults.baseURL = '/api'   //主要是这行代码，设置了一个基本的url
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

第二步：在config中进行配置：

proxyTable: {
      '/api':{
        target : 'http://127.0.0.1:9813',  //这里代表需要访问的地址
        changeOrigin  : true,
        pathRewrite : {
          '^/api' : ''  //这里会将/api替换成''，假如我们访问http://127.0.0.1:9813/apk/info，那么在axios请求的时候只需要'/apk/info'就可以了。
        }
      }
    }

然后就可以使用了，跨域问题解决了。

问题二

先来看一看我之前的代码：

getInfo: ()=>{
      console.log(this);
    }

这里按理说没啥毛病，但是，怎么都访问不到this，以及全局注册的axios，所以我们还是老老实实的function把，不要炫酷了。

getApkInfo :function () {
      let that = this;
      this.$http.get("/apk/info/getInfo").then(function (res) {
          let data =res.data;
          if (data.code == 200){
            that.apkInfoColumnsData.push(data.data);
          }
        })
    }

这样就可以了！