前言
最近在自己学习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.