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

推薦する

モバイルウェブ画面適応(rem)

序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...

js+ca​​nvas でコードレイン効果を実現

この記事では、js+ca​​nvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内...

CSS でより美しいリンクプロンプト効果をカスタマイズする方法

提案: コードをできるだけ手書きすると、学習の効率と深さを効果的に向上できます。デフォルトでは、&l...

Linux システムで Code Cloud にプロジェクトをアップロードする方法

Code Cloudで新しいプロジェクトtest1を作成します。 公開鍵を取得するには次のコマンドを...

Excelアップロード機能を実現するVue + iViewの完全コード

1. HTML部分 <Col span="2">ファイルをアップロー...

Linuxにおけるselinuxの基本設定チュートリアルの詳細な説明

selinux ( Security-Enhanced Linux)は、Linux カーネル モジュ...

トップに戻るボタンを実装するJavaScript

この記事では、トップに戻るボタンを実装するためのJavaScriptの具体的なコードを参考までに紹介...

MySQL クエリ ステートメントのプロセスと EXPLAIN ステートメントの基本概念とその最適化

ウェブサイトやサービスのパフォーマンスは、データベースの設計(適切な言語開発フレームワークを選択した...

Vue uniapp はセグメンター効果を実現します

この記事では、セグメンター効果を実現するためのvue uniappの具体的なコードを参考までに共有し...

Vue3でカルーセルコンポーネントをカプセル化する方法

目的カルーセルコンポーネントをカプセル化して直接使用します。具体的な内容は以下のとおりです。一般的な...

MySQL フラッシュバック ツール binlog2sql の詳細なインストールと設定のチュートリアル

概要binlog2sql は、Python で開発されたオープンソースの MySQL Binlog ...

Vueはボタン切り替え画像を実装します

この記事では、ボタン切り替え画像を実現するためのVueの具体的なコードを例として紹介します。具体的な...

黒、白、グレーの控えめでエレガントなウェブデザインを鑑賞

クラシックな色の組み合わせの中でも、黒、白、グレーの時代を超えた魅力を否定できる人はおそらくいないで...

nginx のロケーションで URI の傍受を実装する方法

例:場所のルートとエイリアスルートディレクティブは、ルートによって設定されたディレクトリに検索ルート...