vue.jsでポートを変更する方法

Vue.js はフロントエンド フレームワークとして、ホット ロードや自動再構築などの機能を実装するために、開発プロセス中に開発サーバーを起動する必要があります。デフォルトでは、Vue.js 開発サーバーはポート 8080 をリッスンします。ただし、場合によっては、競合を回避したり、プロジェクトの要件を満たすために、デフォルトのポート番号を変更する必要がある場合があります。以下は、Vue.js プロジェクトのデフォルトのポート番号を変更する方法です。

最初の方法: コマンド ライン パラメーターを使用する

Vue-cli はポートを変更する簡単な方法を提供します。つまり、スタートアップ コマンドに --port を追加します。または -p パラメータ。たとえば、ポート番号を 3000 に変更するには、次のコマンドを使用して開発サーバーを起動します。

npm run serve -- --port 3000

ご覧のとおり、npm runserve## の後に 2 本の水平線が追加されています。 # コマンド。次の --ポート 3000 が開発サーバーに渡されるパラメータであることを意味します。変更が完了すると、Vue アプリケーションがポート 3000 で起動されます。

2 番目の方法: 構成ファイルを変更する

コマンド ライン パラメーターを使用することに加えて、Vue プロジェクトの構成ファイルを変更することによって、デフォルトのポート番号を変更することもできます。 Vue-cli 3.x バージョンでは、Vue プロジェクトの構成ファイルはプロジェクトのルート ディレクトリの

vue.config.js ファイルにあります。ファイルが存在しない場合は、手動で作成できます。

vue.config.js ファイルで、構成パラメータを devServer オブジェクトに渡すことで、デフォルトのポート番号を変更できます。たとえば、次のコードはポート番号を 3000 に変更します。

module.exports = {
  devServer: {
    port: 3000
  }
}

ポートを変更した後に Vue アプリケーションを起動できず、「ポートが占有されています」というエラー メッセージが表示されることに注意してください。ポートがすでに別のアプリケーションによって占有されていることが原因である可能性があります。現時点では、別のポート番号を選択し、対応する構成ファイルまたはコマンド ライン パラメータを変更する必要があります。

つまり、コマンド ライン パラメーターを使用するか、構成ファイルを変更するかに関係なく、さまざまなプロジェクトのニーズに合わせて Vue.js 開発サーバーのデフォルトのポート番号を簡単に変更できます。同時に、これらの構成テクニックに慣れることは、Vue.js フレームワークをより深く理解し、開発効率とコードの品質を向上させるのにも役立ちます。

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