vue项目接口地址暴露_vue项目配置生产环境和发布环境的接口地址.md

在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.