头像

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

2021-07-05 17:39:40 来源:懒人资源网   浏览(149)   评论 ( 0 )   

在使用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
}

在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) {
                        .....
                    }
                })
            }



标签: vue全局
声明:转载请注明来源(懒人资源网)并保留原文链接:http://www.lanrencom.com/jishu-540.html
评论0

后面还有条评论,点击查看>>