axios 和 vue-axios

vue-cli 下进行前后端通讯时，可以使用 axios vue-axios实现，避免引入$.ajax减小项目大小。
首先使用npm下载所需的包

// cmd 命令
$ npm install axios vue-axios -S

然后在vue-cli 3.0脚手架中的main.js 中引用 axios并注入到Vue 中

//main.js
import Vue from 'vue';
import axios from 'axios';
import vueAxios from 'vue-axios';

Vue.use(vueAxios, axios); //通过 vue-axios 将axios 注入Vue对象

全局的 axios 默认值

---

axios请求可以预配置全局变量，例如超时时间、请求地址等参数。（参考：【axios文档】）

axios.defaults.timeout = 5000;// 请求超时
axios.defaults.baseURL = 'http://192.168.2.75';

开发环境 和 生产环境不同的请求地址

一个项目，我们在开发环境进行测试和在生产环境正式运行时，大多数情况下请求的api_path是不同的，每次对不同的环境进行打包都要更改baseURL的值。

这种情况，可以通过新建 开发环境配置文件 .env.development

//.env.development 
VUE_APP_URL=http://localhost:8080

和 生产环境配置文件 .env.production

//.env.production
VUE_APP_URL=http://api.xxx.com

来实现配置不同的环境参数

//main.js
import Vue from 'vue';
import axios from 'axios';
import vueAxios from 'vue-axios';

Vue.use(vueAxios, axios); //通过 vue-axios 将axios 注入Vue对象
axios.defaults.timeout = 5000;// 请求超时
axios.defaults.baseURL = process.env.VUE_APP_URL;//请求地址