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;//请求地址