在vue-cli3中没有config的文件夹,所以需要配置生产和开发环境的接口。因为想要我们现在开发使用的mock数据接口,减轻之后换接口只需要修改一个地方的工作量。现在是在vue中直接请求mock数据接口,比较繁多,之后如果修改起来比较麻烦。
fetchData(current, pageSize){ //获取数据
getRequest("http://rap2api.taobao.org/app/mock/272946/safety")
.then((res) => {//请求成功回调,请求来的数据赋给searchList数组
var num=current*pageSize;
this.tableData = res.items.slice(num-pageSize,num);
this.total = res.items.length
console.info(res);
},function(res) {//失败显示状态码
alert("res.status:"+res.status)
})
},
类似于这样,所以想将其封装在开发环境接口中。
全局引入自定义js文件
新建interface/index.js文件
//配置全局访问接口地址
let commonUrl = "http://rap2api.taobao.org/app/mock/272946";
let baseUrl = {
commonUrl
}
export default baseUrl
在main.js中全局引入
import api from './interface/index'
Vue.prototype.$api=api.commonUrl
然后在.vue文件中只需要简单的接口
//获取数据
getRequest(this.$api + "/carInfo")
.then((res) => {
console.log(res);
this.datas = res.items;
var num = current * pageSize;
this.users = this.datas.slice(num - pageSize, num);
this.total = res.items.length;
})
.catch((error) => {
console.log(error);
});
其中this.
api,因为在main.js中将其加入原型,命名为$api.