vue配置多代理服務接口地址操作
更新時間：2020年09月08日 15:06:21 作者：CoderYin
這篇文章主要介紹了vue配置多代理服務接口地址操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
一、介紹
隨著微服務架構的流行，后臺項目逐漸被拆分成不同的模塊進行通信，但是前端還是只有一個項目所以在訪問不同模塊后臺時，需要請求不同的地址，在vue項目中，通過配置代理可以進行后端服務器接口地址訪問，當需要訪問不同微服務的后端接口時就需要配置不同的地址。
二、代碼
config/index.js文件中配置代理地址：
自己項目中定義所有接口api管理文件src/api/getData.js：
頁面調用接口時xxx.vue
三、總結
1、vue使用配置多代理地址方式可以訪問不同的項目地址，使用以上方法。
2、同時也是可以把所有接口通過一個統(tǒng)一的后臺項目通過feign調用其他系統(tǒng)接口進行訪問，使用該種方式只需要配置一個代理地址即可，同時也可以對所有接口調用進行監(jiān)控，比如添加用戶操作記錄時就比較簡單，只需要定義一個aop切面監(jiān)控conroller中的方法即可。
補充知識：Vue解決跨域多個target問題（配置多個代理問題）
我就廢話不多說了，大家還是直接看代碼吧~
devServer: {
publicPath: process.env.NODE_ENV === 'production'? '/production-sub-path/': '/',
proxy: {
//可以配置多個代理
'/api': {
target: 'http://192.168.0.201:9994',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
},
'/images': {
target: 'http://baidu.com',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/images': ''
}
}
}
},
以上這篇vue配置多代理服務接口地址操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
vue使用tracking實現(xiàn)人臉識別/人臉偵測完整代碼
作為一個AI模型,人臉識別涉及到多個技術領域,下面這篇文章主要給大家介紹了關于vue使用tracking實現(xiàn)人臉識別/人臉偵測的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue內置組件Transition的詳解,簡單地說，就是當元素發(fā)生變化，比如消失、顯示時，添加動畫讓它更自然過渡，它是vue內置組件，不需要引入注冊就可以直接使用，本文通過實例代碼介紹的非常詳細，需要的朋友可以參考下2023-09-09
使用vue-aplayer插件時出現(xiàn)的問題的解決
這篇文章主要介紹了使用vue-aplayer插件時出現(xiàn)的問題的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue-cli中的babel配置文件.babelrc實例詳解
Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。本文介紹vue-cli腳手架工具根目錄的babelrc配置文件，感興趣的朋友一起看看吧2018-02-02
Ant?Design-vue?解決input前后空格問題(推薦)
最近做項目遇到這樣一個問題輸入框不允許有前后空格但字符中間可以有空格，怎么解決這個問題呢，接下來小編把ant?Design-vue?解決input前后空格問題的實現(xiàn)代碼分享給大家，感興趣的朋友一起看看吧2022-10-10
vue3?TS?vite?element?ali-oss使用教程示例
這篇文章主要為大家介紹了vue3?TS?vite?element?ali-oss使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)電子時鐘效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章介紹了Vue.js中v-model指令的用法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
vue2.0 + ele的循環(huán)表單及驗證字段方法
今天小編就為大家分享一篇vue2.0 + ele的循環(huán)表單及驗證字段方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09