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

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

一、前言

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

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

二、如何配置

思路:

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

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzxdjw.html