vue怎么把api 挂载到全局_vue设置全局访问接口API地址的方法

vue设置全局访问接口API地址的方法

发布时间：2020-08-15 11:55:20

来源：亿速云

阅读：234

作者：小新

这篇文章主要介绍vue设置全局访问接口API地址的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

在使用vue框架进行前后端分离项目开发时，通常涉及到与后段接口进行交互，平时一般使用比较多的就是用axios来实现调用后段接口，写法一般为

xxx() {

const _this = this

axios.get("http://ip:port/xx/xx").then(function (resp) {

.....//省略

})

}

但是有一个比较普遍的问题就是，假如我们后端接口地址改变了，或者是网络地址发生了变化，就需要在上面IP以及端口的位置每一处都需要修改，所以我们需要一个一处设置 处处可用的配置，如下

在src目录下新建interface文件夹，新建index.js文件

//配置全局访问接口地址

let commonUrl = "http://ip:port";

let baseUrl = {

commonUrl

}

export default baseUrl

在main.js中引入上述配置import api from "./interface/index" Vue.prototype.$api = a