<p>一、npm 安装axios，文件根目录下安装，指令如下</p><p>npm install axios --save-dev</p><p>二、修改原型链，在main.js中引入axios</p><p>import axios from 'axios'</p><p>接着将axios改写为Vue的原型属性，</p><p>Vue.prototype.$http=axios</p><p>这样之后就可在每个组件的methods中调用$http命令完成数据请求</p><p>三、在组件中使用</p><pre class="brush:js;toolbar:false">
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)
})
}
}</pre><p>有关axios的配置请参考如下文档，点击打开链接</p><p>下面给大家介绍下vue-cli配置axios的方法</p><p>1.</p><p>npm install axios --save</p><p>npm install @type/axios --save-dev(使用ts编写的需要此声明文件，升级的axios好像不需要了，已经自带)</p><p>3.</p><p>在src目录下添加axios.ts文件，内容：</p><pre class="brush:js;toolbar:false">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</pre><p>4.</p><p>types文件夹中新建vue.d.ts文件，内容：</p><pre class="brush:js;toolbar:false">
import{AxiosStatic,AxiosInstance}from'axios'
declaremodule'vue/types/vue'{
interfaceVue{
$axios:AxiosStatic;
}
}</pre><p>这样就可以在各个模块中通过this.$axios来使用axios了</p><p>其中axios中：</p><p>1. build.rootpath.js内容：</p><pre class="brush:js;toolbar:false">varpath=require('path')
varrootpath=path.resolve(__dirname,'../dist')
module.exports=rootpath</pre><p>2. store是vuex的文件，所以要事先安装vuex</p><p>总结</p><p>以上所述是小编给大家介绍的vue-cli 引入、配置axios的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！</p>