vue項目中如何調用多個不同的ip接口
如何調用多個不同的ip接口
靈感來源:
- 項目的登錄登出權限是調A的ip下面的接口,其他的功能調的接口是B的ip下面的接口
思路:
- 其實就是多寫幾個request.js文件罷了,或者在一個文件里面多寫幾個響應攔截和請求攔截.
上代碼:
第一個文件
request.js
import axios from 'axios' import Vue from 'vue' if(process.env.NODE_ENV == "development"){//開發(fā)環(huán)境 ? axios.defaults.baseURL = 'http://xxxxxx/air/'; }else if(process.env.NODE_ENV == "production"){ ? axios.defaults.baseURL = '/air/api'; // 生產環(huán)境 } const service = axios.create({ ? timeout: 20000, }) // 請求攔截 service.interceptors.request.use( ? config => { ? ? return config; ? }, ? error => { ? ? // 請求錯誤處理....... ? } ) // 響應攔截 service.interceptors.response.use( ? response =>{ ? ? //響應結果處理....... ? }, ? error => { ?? ?// 請求錯誤處理....... ? } ) export default service
第二個文件
requestSec.js
import axios from 'axios' import Vue from 'vue' if(process.env.NODE_ENV == "development"){//開發(fā)環(huán)境 ? axios.defaults.baseURL = 'http://xxxxxx/air/'; }else if(process.env.NODE_ENV == "production"){ ? axios.defaults.baseURL = '/air/api'; // 生產環(huán)境 } const sec = axios.create({ ? timeout: 20000, }) // 請求攔截 sec.interceptors.request.use( ? config => { ? ? return config; ? }, ? error => { ? ? // 請求錯誤處理....... ? } ) // 響應攔截 sec.interceptors.response.use( ? response =>{ ? ? //響應結果處理....... ? }, ? error => { ?? ?// 請求錯誤處理....... ? } ) export default sec
哎?你會發(fā)現這兩個文件不是一樣的嗎,對,就是一樣的,只不過是聲明了兩個請求攔截和響應攔截罷了.你也可以放到一個文件里面.都一樣.
第三個文件
封裝的接口文件
import axios from './request' import sec from './requestSec' // 登錄 export function login(data) { ? return sec({ ? ? method:'post', ? ? url:'system/login', ? ? data, ? }) } // 分頁查詢所有管轄區(qū)域 export function queryWithPageAll(params) { ? return axios({ ? ? method:'get', ? ? url:'area/queryAll', ? ? params ? }) }
到這里就可以看出不一樣了,如果要調用request里面ip下面的接口就return axios 如果要調用requestSec里面ip下面的接口就return sec
其他就是正常的了,哪個頁面調用就正常調用就可以了.
設置自動配置不同環(huán)境接口
1.再根目錄新建一個文件夾configenv
在文件夾下新建baseServerConfig.js
module.exports = { ? // 本地環(huán)境設置 測試接口的地址 ? "localhost:8010": { ? ? mallUrl: 'http://202.108.22.5:8000', ? ? storeHouseUrl: 'http://202.108.22.103:8080', ? }, ? // 本地IP環(huán)境設置 測試接口的地址 ? "10.12.5.46:8010": { ? ? mallUrl: 'http://202.108.22.5:8000', ? ? storeHouseUrl: 'http://202.108.22.103:8080', ? }, ? // 測試環(huán)境設置 測試接口的地址 ? "22.81.24.60:8080": { ? ? mallUrl: 'http://202.108.22.5:8000', ? ? storeHouseUrl: 'http://202.108.22.103:8080', ? }, ? // UAT環(huán)境設置 UAT接口地址 ? "uat.baidu.com": { ? ? mallUrl: 'http://uat.baidu.com', ? ? storeHouseUrl: 'http://uat-init.baidu.com'? ? }, ? ? //生產環(huán)境設置 生產接口地址 ? "www.baidu.com": { ? ? mallUrl: 'http://www.baidu.com', ? ? storeHouseUrl: 'http://init.baidu.com'? ? } }
2.在main.js 入口文件中
引入baseServerConfig,用變量接收當前的環(huán)境 對應的接口地址,把這個變量放入Vue的原型的屬性上
import baseServer from '../configenv/baseServerConfig' const mallUrl= baseServer[location.host].mallUrl const storeHouseUrl= baseServer[location.host].storeHouseUrl Vue.prototype.mallUrl= mallUrl;//商城地址 Vue.prototype.storeHouseUrl= storeHouseUrl;//倉庫地址
3.在實際Vue頁面中,接口實際調用
this.$http.get(this.mallUrl+"/api/a/b/c").then(resp =>{ ?? ?// 寫邏輯 }) this.$http.get(this.storeHouseUrl+"/api/abc/b/c").then(resp =>{ ?? ?// 寫邏輯 })
小結:這樣就實現了當前環(huán)境 與 不同環(huán)境接口相互綁定,避免人員重復的切換接口環(huán)境。
從而實現了npm run build 一個包既可以放在測試環(huán)境、UAT環(huán)境和生產環(huán)境
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
淺談vue中computed屬性對data屬性賦值為undefined的原因
本文主要介紹了淺談vue中computed屬性對data屬性賦值為undefined的原因,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02vue、uniapp中動態(tài)添加綁定style、class?9種實現方法
這篇文章主要介紹了vue、uniapp中動態(tài)添加綁定style、class?9種方法實現,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09