vue-cli 引入、配置axios的方法
一、npm安装axios，文件根目录下安装，指令如下
npminstallaxios--save-dev
二、修改原型链，在main.js中引入axios
importaxiosfrom'axios'
接着将axios改写为Vue的原型属性，
Vue.prototype.$http=axios
这样之后就可在每个组件的methods中调用$http命令完成数据请求
三、在组件中使用
methods:{
get(){
this.$http({
method:'get',
url:'/url',
data:{}
}).then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
})
this.$http.get('/url').then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
})
}
}
有关axios的配置请参考如下文档，点击打开链接
下面给大家介绍下vue-cli配置axios的方法
1.
npminstallaxios--save
2.
npminstall@type/axios--save-dev(使用ts编写的需要此声明文件，升级的axios好像不需要了，已经自带)
3.
在src目录下添加axios.ts文件，内容：
importaxiosfrom'axios'
import{Notification}from'element-ui'
importstorefrom'./store/index'
importbuildconffrom'../config/build.rootpath.js'
axios.defaults.withCredentials=true;
axios.defaults.baseURL=buildconf.serverUrl
//axios.defaults.baseURL='http://gsblackwidow.chinacloudsites.cn/'
axios.interceptors.request.use(function(config){
//document.getElementById('g-loader').style.display='flex'
store.commit('requestModify',1)
returnconfig;
},function(error){
returnPromise.reject(error)
})
axios.interceptors.response.use(function(response){
store.commit('requestModify',-1)
//document.getElementById('g-loader').style.display='none'
returnresponse.data;
},function(error){
store.commit('requestModify',-1)
//document.getElementById('g-loader').style.display='none'
if(error.response.status===401){
Notification({
title:'权限无效',
message:'您的用户信息已经失效,请重新登录',
type:'warning',
offset:48
});
window.location.href='/#/login'
}else{
Notification({
title:'请求错误',
message:`${error.response.status}\n${error.config.url}`,
type:'error',
offset:48,
})
}
returnPromise.reject(error)
})
exportdefaultaxios
4.
types文件夹中新建vue.d.ts文件，内容：
import{AxiosStatic,AxiosInstance}from'axios'
declaremodule'vue/types/vue'{
interfaceVue{
$axios:AxiosStatic;
}
}
这样就可以在各个模块中通过this.$axios来使用axios了
其中axios中：
1.build.rootpath.js内容：
varpath=require('path')
varrootpath=path.resolve(__dirname,'../dist')
module.exports=rootpath
2.store是vuex的文件，所以要事先安装vuex
总结
以上所述是小编给大家介绍的vue-cli引入、配置axios的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！