Vueプロジェクトでプロキシを設定する方法

はじめに

フロントエンド開発では、サーバーにリクエストしてデータを取得する必要がある場面がよくあります。ただし、ローカル開発を行う場合、サーバーがまだ構築されていないことが多く、このときは決して黙って待つわけにはいかないため、サーバー データが返されることをシミュレートする偽のインターフェイスをローカルに構築する必要があります。

Vue プロジェクトでは、vue.config.js ファイルを通じてプロキシを構成し、バックエンド インターフェイスをローカルで開発できるため、開発効率が大幅に向上します。この記事では、Vue プロジェクトでプロキシを設定し、インターフェイスのフェイク データを実装する方法を詳しく紹介します。

Text

Vue プロジェクトのプロキシ構成は、vue.config.js ファイルで行う必要があります。 vue-cli3.x でプロジェクトをビルドした場合は、まずプロジェクトのルートディレクトリに vue.config.js ファイルが存在するか確認し、存在しない場合は手動でプロジェクトのルートディレクトリにこのファイルを作成する必要があります。この時点で、vue-cli によって公式に提供されている vue.config.js の設定テンプレートをコピーできます。

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 服务器地址
        changeOrigin: true,
        pathRewrite: {
          '/api': '' // 重写路径，例如接口地址是 /api/user，重写成 /user
        }
      }
    }
  }
}

上記のコードでは、エージェントは devServer オプションで設定されています。このうち、port は開発サーバーのポート番号を指定するために使用され、proxy はオブジェクト タイプであるプロキシを設定するために使用され、キーの値はプロキシを必要とするインターフェイスを照合するために使用され、値の値はプロキシの設定項目。

プロキシ オブジェクトの設定項目を以下に示します:

• ターゲット: サーバー アドレス。プロキシする必要があるターゲット サーバーのアドレスを示します。IP アドレスまたはドメイン名にすることができます。通常は http(s):// で指定します。たとえば、http://localhost:3000 はターゲット サーバーのアドレスです。
• changeOrigin: クロスドメインかどうか。開発モードでは、true に設定する必要があります。デフォルトは false です。これは、リクエストを受信した後、URL のorigin フィールドが直接次のように置き換えられることを意味します。プロキシアドレス。たとえば、Ajax を介してフロントエンドによってリクエストされた URL は http://localhost:8080/api/list です。ターゲットが http://localhost:3000 に設定されている場合、changeOrigin が true に設定されている場合、実際のリクエストは送信される URL は http://localhost:3000/api/list になります。
• pathRewrite: パスの書き換え。/api、/web などのプレフィックスを含む一部のインターフェイス アドレスの場合、これらのプレフィックスを書き換える必要があります。たとえば、リクエストされた URL が /api/user の場合、パスを書き換えるときは、/api プレフィックスを削除して /user に書き換える必要があります。

開発時には注意が必要です環境では、Vue プロジェクトのプロキシは開発サーバーでのみ有効になります。運用環境では、devServer で構成されたプロキシを Nginx などのリバース プロキシ ソリューションに変換する必要がある場合があります。

概要

Vue プロジェクト開発において、エージェントは非常に実用的なツールです。プロキシを通じて、バックエンド インターフェイスへの呼び出しをローカルのモック データに転送し、クロスドメインの問題を適切に処理できます。この記事では、フロントエンド開発をより効率的に実行するために Vue プロジェクトでプロキシを構成する方法を紹介します。開発でプロキシを使用すると、開発をスピードアップし、開発エクスペリエンスを向上させることができます。

以上がVueプロジェクトでプロキシを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。