前言

最近在自己学习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);
          }
        })
    }

这样就可以了!

结语

Yo peace & love!
最近发现了一个宝藏说唱歌手,Juice World。
R.I.P!

Q.E.D.


Hello welcome to my blog