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アドレスを設定する方法

推薦する

node.js が大規模プロジェクトに適さない理由

目次序文1. アプリケーションコンポーネント2. アプリケーションの種類3. アプリケーションサービ...

Linux jdk のインストールと環境変数の設定チュートリアル (jdk-8u144-linux-x64.tar.gz)

最初にsudo suコマンドを使用して root アカウントに切り替えることをお勧めします。そうしな...

WindowsでのMySQLインストールチュートリアルの詳細な紹介

目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...

Ansibleを使用してTomcatをバッチでデプロイする方法

1.1 ディレクトリ構造の構築この操作は、nginx+mysql+tomcat+dbのディレクトリ構...

MySql への新しいユーザーの追加、ユーザー用のデータベースの作成、ユーザーへの権限の割り当ての概要

1. 新しいユーザーを追加するローカルIPアクセスのみを許可する '123456' ...

クリーンなコードのための Web デザインの 12 の法則 [グラフィック]

美しいコードは美しい Web サイトの基礎です。優れた CSS は、同様に優れた HTML の上にの...

HTMLウェブページテーブル構造化マークアップの応用に関する簡単な説明

Web テーブルの構造マークアップについて説明する前に、いくつかの画像を見てみましょう。 HTML ...

CSS3は、ズームと回転を実現するためにscale()とrotate()を使用します。

1. scale() メソッドズームとは「縮小」と「拡大」を意味します。 CSS3 では、scal...

CSS 複数 3 列適応レイアウト実装の詳細な説明

序文従来のWEBレイアウトに沿うため、すべてヘッダーとフッターモードの左・中央・右レイアウトで書かれ...

HTML テーブル マークアップ チュートリアル (38): ヘッダーの境界線の色属性 BORDERCOLOR

テーブルを美しくするために、ヘッダーに異なる境界線の色を設定できます。基本的な構文<TH 境界...

ウェブページのフッターで注意すべきことのまとめ

たくさんのリンクおそらく、このようなサイトをたくさん見たことがあるでしょう。ページの下部に 50 個...

LeetCode の SQL 実装 (196. 重複するメールボックスを削除する)

[LeetCode] 196.重複したメールを削除するSQL クエリを記述して、Person とい...

JavaScript の async と await のシンプルで詳細な学習

目次1. はじめに2. 詳しい説明2.1、非同期2.1.1. 関数はPromise以外のオブジェクト...

Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明

目次スロットなしVue2.x スロットスロット付き名前付きスロットスロット属性なしスロットの簡単なサ...

MySQLカーソルの詳細な紹介

目次1. カーソルとは何ですか? 2. カーソルの使い方1. カーソルを宣言する2.カーソルを開く3...