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 = api.commonUrl

 

接下来在原axios调用接口的位置稍作修改即可实现正常调用接口了

 xx() {
                const _this = this
                axios.get(this.$api + "/xx/xx").then(function (resp) {
                        .....
                    }
                })
            }