Vue 構成リクエストの複数サーバーソリューションの詳細な説明

Vue 構成リクエストの複数サーバーソリューションの詳細な説明

1. 解決策

1.1 インターフェースコンテキストパスの説明

2 つのバックエンド インターフェイス サービス要求プレフィックスは次のとおりです。

  • プレフィックス 1: /bryant
  • 接頭辞2: /

1.2 vue.config.js の設定

開発サーバー: {
 ポート: 8005、
 プロキシ: {
  // 最初のサーバー構成 '/bryant': {
   ターゲット: 'http://localhost:8081,
   ws: 真、
   変更元: true、
   パス書き換え: {
    '^/ブライアント': '/ブライアント'
   }
  },
  // 2 番目のサーバーの構成 '/': {
   ターゲット: 'http://localhost:8082',
   ws: 真、
   変更元: true、
   パス書き換え: {
    '^/': '/'
   }
  } 
 }
} 

1.3 axios の変更

// api base_url、set プレフィックスが存在しません const BASE_URL = ''
// axiosインスタンスを作成する const service = axios.create({
 ベースURL: BASE_URL、 
 timeout: 6000 // リクエストタイムアウト})

現時点では、axiosはbaseUrl設定を直接指定する必要はありません。

1.4 リクエストの送信

// リクエストのプレフィックスは「/」です
this.$http.get("/basketball").then(res => {
 コンソールログ('/', res)
}).catch(エラー => {
 コンソール.log(エラー)
})
// リクエストのプレフィックスは「bryant」です
this.$http.get("/bryant/mvp").then(res => {
 console.log('/bryant', 文字列)
}).catch(エラー => {
 コンソール.log(エラー)
})

要約する

複数のインターフェースサービスの場合、プレフィックスが「/」の場合は、プロキシ設定の最後に配置する必要があります。プロキシする場合は、上から下に向かって検索されます。先頭に配置すると、他のサービスもこの設定によってプロキシされます。

複数サーバーを必要とする Vue 構成の解決方法の詳細な説明については、これで終わりです。複数サーバーを必要とする Vue 構成の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue 構成マルチプロキシ サービス インターフェース アドレス操作
  • Vue プロジェクトを IIS サーバーにパッケージ化してデプロイする構成方法
  • クライアント(vueフレームワーク)とサーバー(koaフレームワーク)の通信とサーバーのクロスドメイン構成の詳細な説明

<<:  Centos6にMysql5.7をインストールする方法

>>:  CentOS7仮想マシンで固定IPアドレスを設定する方法

推薦する

画像ブラインド表示の効果を実現するための純粋な CSS の例

まず、完成した効果をお見せしましょう 主なアイデア: 実際、このブラインドは一種の手品を使用していま...

Linux環境でログファイルを表示するコマンドの詳細な説明

目次序文1. catコマンド: 2. moreコマンド: 3. lessコマンド: 4. headコ...

自動ロック画面機能を実現するjs

1. 使用シナリオこのような要件があるため、システムが開発されました。ユーザーがデスクトップを離れ...

Node.js で簡単なクローラーケースを作成するチュートリアル

準備まず、nodejs をダウンロードする必要がありますが、これは問題ないはずです。原文はwebst...

Vueメソッドに基づくシンプルなタイマーの実装

Vueのシンプルなタイマーを参考にしてください。具体的な内容は以下のとおりです原理: setInte...

Vueライフサイクルの詳細な説明

目次ライフサイクルを理解する理由ライフサイクルとはライフサイクルフック関数作成され、マウントされたフ...

CSS を使用して固定左列と適応右列の 2 列レイアウトを実現する 4 つの方法

1. フロート+オーバーフロー:非表示このメソッドは主にオーバーフローを通じて BFC をトリガーし...

Antdesign-vueとsortablejsを組み合わせて、2つのテーブルをドラッグして並べ替える機能を実現

目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...

VMware仮想マシンにLinux(CentOS)をインストールするための詳細な構成手順

CentOS7をダウンロード私がダウンロードしたイメージはCentOS-7-x86_64-DVD-1...

CentOS 6.2 に MySQL 5.7.28 をインストールするチュートリアル (mysql ノート)

1. 環境整備1.MySQLインストールパス: /usr/local 2. CentOS 6.2 ...

Nginx のリロード プロセスの背後にある真実を探る

本日の記事では、主にNginxのリロードプロセスについて紹介します。実は前回の記事では、nginx ...

JavaScript は詳細なコードで星座クエリ機能を実装します

目次1. タイトル2. コード3. 結果IV. 結論1. タイトルテキスト ボックスに誕生日の値を入...

MySQL 作成ルーチン権限に関する注意事項

1. ユーザーにルーチン作成権限がある場合は、プロシージャ | 関数を作成できます。 2. ユーザー...

HTML でフレームセット タグを使用するチュートリアル

フレームセット ページは通常の Web ページとは多少異なります。依然として <HTML>...

MySQL で重複レコードを見つけて削除する方法

みなさんこんにちは。私は技術の話ばかりして髪を切らない先生のトニーです。何らかの歴史的な理由や誤操作...