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項目，雖沒什么技術含量。但不要隨意轉載，如需轉載保存，請署上 轉載地址。謝謝配合。