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でできるならJavaScriptは使わない

序文JavaScript で記述できるアプリケーションは、最終的には JavaScript で記述さ...

WeChatアプレットのスクロールビューが左右連動効果を実現

WeChatアプレットはスクロールビューを使用して左右のリンクを実現します。参考までに、具体的な内容...

CentOS 8 に MySql をインストールしてリモート接続を許可する方法

ダウンロードしてインストールします。まず、システムに MySQL または MariaDB があるかど...

MySQL の日付フォーマットと複雑な日付範囲クエリ

目次序文クエリの使用シナリオ例時間間隔クエリクエリ日付と今日の時間の比較データ一般的なサイクルタイム...

CentOS7 に Redis をインストールして設定する方法

導入Redis を詳しく説明する必要はありません。インストールと設定を始めましょう。インストールソー...

Docker で Java 8 Spring Boot アプリケーションを開発する方法

この記事では、ローカル マシンに Java 8 をインストールせずに、Java 8 を使用して簡単な...

Gearman + MySQL による永続化操作例

この記事では、gearman+mysql メソッドを使用して永続化操作を実装します。ご参考までに、詳...

Linuxでディスクをマウントする方法

仮想マシンを使用しているときに、ディスク容量が不足し、継続使用するためにディスクをマウントする必要が...

vue-router 4 の使用例の詳しい説明

目次1. インスタンスをインストールして作成する2. vue-router4の新機能2.1 動的ルー...

ページ切り替え効果を作成するための純粋な CSS3 のサンプルコード

前に書いたものは複雑すぎるので、シンプルなコアにしましょう <html> <ヘッド...

MySQL データをエクスポートおよびインポートするための HeidiSQL ツール

場合によっては、SQL へのデータのエクスポートとインポートを容易にするために、特定のツールを使用し...

docker ログ - docker コンテナ ログの実装を表示します

docker logs コマンドを使用してコンテナ ログを表示できます。コマンド形式: $ dock...

bashの初期化メカニズムの詳細な説明

Bash 初期化ファイル対話型ログインシェル次の場合にはログイン シェルを取得できます。ローカル端末...

よくある HTML タグの記述エラー

HTML Police がコードを調べて意味のないタグをすべて見つけ出すので、注意を払う必要がありま...

CSSは高さを設定せずにdivを完全に中央に配置することを実現します

必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...