快捷導(dǎo)航

在vue中配置不同的代理同時(shí)訪問不同的后臺(tái)操作

更新時(shí)間：2020年09月11日 11:51:46 作者：池中飛雪

這篇文章主要介紹了在vue中配置不同的代理同時(shí)訪問不同的后臺(tái)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧

如果和不同的后臺(tái)調(diào)接口，如果后臺(tái)接口沒有合到一起，前端可以配不同的代理來(lái)共同訪問他們的接口

在config文件夾下的index.js中設(shè)置如下：

proxyTable: {
  '/api/login': { // 第一個(gè)代理：此處的路徑是所有接口前面相同的部分，用來(lái)匹配帶有這部分路徑的
    target: "http://192.168.100.209:8910",
    changeOrigin: true,
    secure: false
  },
  '/api/supplier': { // 設(shè)置第二個(gè)代理
    target: "http://192.168.101.26:8910",
    changeOrigin: true,
    secure: false
  },
}

補(bǔ)充知識(shí)：vue項(xiàng)目開發(fā)環(huán)境下實(shí)現(xiàn)與多個(gè)后臺(tái)進(jìn)行聯(lián)調(diào)

在配置開發(fā)環(huán)境設(shè)置反向代理的地方設(shè)置反向代理

 proxyTable: {
      '/jk': {
        target: 'http://10.200.101.121:8090/',
        //target: 'http://118.24.184.180:8080/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api', //重寫,
        }
      },
      '/wxapi': {
        target: 'http://10.200.102.141:8089',
        changeOrigin: true,
        pathRewrite: {
          '^/wxapi': '/wxapi', //重寫,
        }
      },
      '/wxttxx': {
        target: 'http://10.200.102.141:8089',
        changeOrigin: true,
        pathRewrite: {
          '^/wxttxx': '/wxttxx', //重寫,
        }
      }
    },

這樣就可以根據(jù)不同的后臺(tái)進(jìn)行聯(lián)調(diào)了

以上這篇在vue中配置不同的代理同時(shí)訪問不同的后臺(tái)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE中使用HTTP庫(kù)Axios方法詳解
本文將詳細(xì)介紹在VUE中使用HTTP庫(kù)Axios的詳細(xì)方法,需要的朋友可以參考下
2020-02-02
MVVM模型在Vue中的使用詳解
MVVM模型主要是為了分離視圖(View)和模型(Model)，其優(yōu)點(diǎn)為：低耦合、可重用性、獨(dú)立開發(fā)以及可測(cè)試，視圖和模型分離的特點(diǎn)給了 Vue 很大的啟發(fā)，這篇文章主要介紹了MVVM模型在Vue中的使用,需要的朋友可以參考下
2022-11-11
Vue3響應(yīng)式高階用法之shallowReadonly()使用
在前端開發(fā)中,Vue3的shallowReadonly() API允許開發(fā)者創(chuàng)建部分只讀的狀態(tài),這對(duì)于保持頂層屬性不變而內(nèi)部屬性可變的場(chǎng)景非常有用,本文將詳細(xì)介紹?shallowReadonly()?的使用方法及其應(yīng)用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-09-09
table表格中使用el-popover 無(wú)效問題解決方法
這篇文章主要介紹了table表格中使用el-popover 無(wú)效問題解決方法,實(shí)例只針對(duì)單個(gè)的按鈕管用在表格里每一列都有el-popover相當(dāng)于是v-for遍歷了所以我們?cè)谟|發(fā)按鈕的時(shí)候并不是單個(gè)的觸發(fā)某一個(gè),需要的朋友可以參考下
2024-01-01
vue開發(fā)之moment的介紹與使用
moment是一款多語(yǔ)言支持的日期處理類庫(kù), 在vue中如何使用呢?這篇文章主要給大家介紹了關(guān)于vue之moment使用的相關(guān)資料,需要的朋友可以參考下
2021-05-05
vue router解決路由帶參數(shù)跳轉(zhuǎn)時(shí)出現(xiàn)404問題
我的頁(yè)面是從一個(gè)vue頁(yè)面router跳轉(zhuǎn)到另一個(gè)vue頁(yè)面,并且利用windows.open() 瀏覽器重新創(chuàng)建一個(gè)頁(yè)簽,但是不知道為什么有時(shí)候可以有時(shí)候又不行,所以本文給大家介紹了vue router解決路由帶參數(shù)跳轉(zhuǎn)時(shí)出現(xiàn)404問題,需要的朋友可以參考下
2024-03-03
vite搭建vue2項(xiàng)目的實(shí)戰(zhàn)過程
自從體驗(yàn)了一下vite之后,真的太快了,然而對(duì)vue3還不是很熟練,就想著在vue2的項(xiàng)目中使用以下vite,下面這篇文章主要給大家介紹了關(guān)于vite搭建vue2項(xiàng)目的相關(guān)資料,需要的朋友可以參考下
2022-11-11
vue3中element-plus?Upload上傳文件代碼示例
這篇文章主要介紹了vue3中element-plus?Upload上傳文件的相關(guān)資料,在時(shí)間開發(fā)中上傳文件是經(jīng)常遇到的一個(gè)需求,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
Vue3如何配置多級(jí)代理
這篇文章主要介紹了Vue3如何配置多級(jí)代理問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-04-04
VUE中Echarts的resize事件報(bào)錯(cuò)和移除windows的事件問題
這篇文章主要介紹了VUE中Echarts的resize事件報(bào)錯(cuò)和移除windows的事件問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07