Vue アプリケーションのポートを変更する方法

Vue.js は、開発者がシングルページ アプリケーション (SPA)、モバイル アプリケーション、デスクトップ アプリケーション、クロスプラットフォーム アプリケーションをより簡単に作成できるようにする人気のフロントエンド JavaScript フレームワークです。通常、開発に Vue を使用する場合はデフォルトのポート (8080) を使用しますが、場合によっては、ニーズを満たすために Vue アプリケーションを別のポートにデプロイする必要があります。

次に、この記事では、Vue アプリケーションのポートを変更する方法を説明します。

1. 設定ファイルを変更する

Vue.js の設定ファイルは vue.config.js です。これを変更することで Vue アプリケーションを変更できます。このファイルポート。次のコードをファイルに追加します。

module.exports = {
  devServer: {
    port: 8888 // 修改为你想要的端口号
  }
}

上記のコードでは、開発サーバーの構成に devServer フィールドが使用され、port フィールドが使用されていることがわかります。フィールドはポート番号を指定するために使用されます。コード内の 8888 を使用するポート番号に置き換えるだけです。

2. コマンド ライン パラメーターの使用

Vue アプリケーションのポートは、コマンド ライン パラメーターを使用して変更することもできます。ターミナルまたはコマンド プロンプトで次のコマンドを実行します。

npm run serve -- --port 8888  // 修改为你想要的端口号

上記のコマンドでは、使用するポート番号を指定するために --port パラメータが使用されています。コード を使用するポート番号に置き換えるだけです。

環境変数の使用

環境変数を使用して、Vue アプリケーションのポートを変更することもできます。システムまたはサーバーに

PORT という名前の環境変数を設定し、その値を目的のポート番号に設定して、Vue アプリケーションを起動します。

PORT=8888 npm run serve  // 修改为你想要的端口号

上記のコマンドでは、

PORT 環境変数を使用して、使用するポート番号を指定します。コード内の 8888 を、使用するポート番号に置き換えます。使用してください。

概要:

実際の開発では、ニーズを満たすために Vue アプリケーションをさまざまなポートにデプロイする必要があることがよくあります。この記事では、Vue アプリケーションのポートを変更する 3 つの一般的な方法 (構成ファイルの変更、コマンド ライン パラメーターの使用、および環境変数の使用) を紹介します。開発者は、実際のニーズに基づいて、Vue アプリケーションをより適切に管理およびデプロイするための最適な方法を選択できます。

以上がVue アプリケーションのポートを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。