前言：在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource，但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource。
目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，下面来具体介绍一下axios的使用。
项目中安装axios
cnpm install axios -S
每个需要请求的组件中都需要引入axios，如果觉得麻烦，可以axios改写成Vue的原型属性，在使用的时候，就不需要每个组件都去引用。
将axios改写成Vue的原型属性
1、在main.js中引入axios
import axios from ‘axios‘
2、写成vue的原型属性
Vue.prototype.$http = axios
在main.js中添加这两行代码之后，就能直接在组件中使用axios了
使用方式
this.$http.post(url,params).then(function (response) {
//请求成功
}).catch(function (error) {
//请求失败
});
实际应用
假设我们需要请求的接口是：http://www.liuliangu.cn:8067/index/data/
如果是开发环境，我们请求的接口如果存在跨域问题，需要配置代理
在vue-cli的config文件下面的index.js里有一个参数叫proxyTable
配置proxyTable的时候本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。
具体配置代码：
// 配置代理
proxyTable: {
‘/api‘:{ // api为匹配项
target:‘http://www.liuliangu.cn:8067‘, // 设置代理目标
changeOrigin: true,
pathRewrite: { // 重写路径
‘^/api‘: ‘/‘
}
}
}
组件中请求的具体代码：
this.$http.post(‘/api/index/data/‘, qs.stringify({
jobName: ‘getSiteProductAnalysis‘,
DateType: this.DateType
})).then(function (response) {
console.log(response)
}).catch(function (error) {
console.log(error);
});
注意
在vue2中使用axios，我们请求的参数仍为json类型，是并没有序列化的。我们需要使用querystring解决该问题
需要先引入 import qs from ‘qs‘;
传入参数的时候转下格式，qs.stringify(data)
这样，我们就能正常请求访问到数据了。
生成环境下，生产代码应该使用npm run build然后把dist放到nginx服务器上，在nginx上配置代理地址。
原文地址：https://www.cnblogs.com/gopark/p/8157306.html