vue-cli项目接口地址可配置化（多环境部署）一处修改多处适用

本文档目的在于帮助对vue了解比较少的同学，能够快速配置vue应用中的接口地址。方便项目切换服务环境后，重新修改多组件的http请求地址。

一、前言

　　我们在上一篇文章分享了vue-cli项目基本搭建(可点击进入查看)。

　　本篇文章我们分享 vue 配置全局对象。在我们平时开发项目的时候，大多数会进行数据交互，这一应用就会使用到交互模块，往往请求的url地址就随着项目模块的增多写在每个模块中，这样的缺点不用我来说，相信大家都知道：模块多了、环境多了很难以维护、修改接口地址，并且很容易出错，哪里多了一个符号或者少了一个就会请求不成功。我们今天分享的小方法就是为了解决这一问题。代码非常简单易懂，意在自己开发项目的时候很快就可以拿过来使用，也为了帮助广大前端爱好者多方位理解vue。话不多说直接上代码。

二、如何配置

思路：

1、配置全局Api其实就是在全局抛出一个公共对象、我们在src下新建一个文件夹 interface 里面 创建一个 index.js 文件用来存储全局Api对象。

2、编写index.js

interface/index.js

// 配置主机地址和端口号（可以有多个，需要测试那个环境字节打开那个base即可）
let base = "http://10.110.147.194:8088"
//  let base = "http://34.231.59.44:37653"
//  let base = "http://34.231.59.45:37654"
//  let base = "http://34.231.59.46:37655"
//  let base = "http://34.231.59.47:37656"


// 在线api接口路径，需要和项目后台确认
let online_url = {
    overall:base + "/report/queryNewOverView",
    
　　//service-volume-controller : Service Volume Controller
    totalVolume: base + "/report/visitVolume/totalVolume",
    channelCompare: base + "/report/visitVolume/channelCompare",
    

　　//user-data-controller : User Data Controller
    repeatUser: base + "/report/users/repeatUser",
    userChannelCompare: base + "/report/users/userChannelCompare",
    userDistribution: base + "/report/users/userDistribution",
    userVolumeTrend: base + "/report/users/userVolumeTrend",
    
　　
　　//efficiency-controller : Efficiency Controller
    solvedRate: base + "/report/efficiency/solveRate",
    solvedQuestion: base + "/report/efficiency/solveQuestion",
    solveQuestionFloat: base + "/report/efficiency/solveQuestionFloat",
    transferredRate: base + "/report/efficiency/transferredRate",
    transferredRateF: base + "/report/efficiency/transferredRateF",
    transferredQuestion: base + "/report/efficiency/transferredQuestion",
    transferredQuestionF: base + "/report/efficiency/transferredQuestionF",
   
　　//kg-performance-controller : Kg Performance Controller
    question: base + "/report/kgperformance/domain&question",
    questionF: base + "/report/kgperformance/questionF",
    

　　//session-follow-controller : Session Follow Controller
    handTime: base + "/report/sessionfollow/handTime",
    handTurns: base + "/report/sessionfollow/handTurns",
    dialogueStage: base + "/report/sessionfollow/dialogueStage",
    customerjourney: base + "/report/sessionfollow/customerjourney",

    //select /report/queryCountryAndChannel
    domainIntent: base + "/report/auxiliary/domain_intent",
    queryCountryAndChannel: base + "/report/auxiliary/queryCountryAndChannel",
    partExport: base + "/report/partExport000"
    
}

//导出online_url对象
export default online_url

3、既然是全局环境都可调用的Api接口地址，那么一定要在全局引用

src/main.js

// 引入vue模块，引入index接口地址对象
import Vue from 'vue'
import App from './App'
import Api from "@/interface/index"

// 将Api对象绑定在vue实例的原型上
Vue.prototype.$Api = Api
Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
let gvm = new Vue({
  el: '#app',
  router,
  Api,
  components: { App },
  template: '<App/>'
})

 

4、在项目中任何一个vue文件中我们都可以用 this.$Api 来访问接口地址，例如

 

 

 

 

最后：

　　本文档意在与帮助初学者快速构建vue项目，虽没什么技术含量。但不要随意转载，如需转载保存，请署上 转载地址。谢谢配合。