Vue.js CLIプロジェクトで開発サーバーのポート番号を変更する方法

Vue.js CLIプロジェクトでポート番号を変更する方法

そこで今回は、Vue.js CLIプロジェクトでポート番号を変更する方法を、2つの方法に分けて詳しく解説します。

方法1：vue.config.jsファイルを使用する

1. プロジェクトルートディレクトリに移動します。
2. vue.config.js ファイルが存在しない場合は、以下のコマンドで作成します。

npx vue init my-project

1. vue.config.js ファイルをテキストエディタで開きます。
2. 以下のコードを devServer オブジェクト内に追記します。

module.exports = {
  devServer: {
    port: 8080 // ポート番号を指定
  }
}

上記の場合、ポート番号は8080に変更されます。必要に応じて、任意のポート番号に変更してください。

1. ファイルを保存して閉じます。
2. 以下のコマンドで開発サーバーを起動します。

npm run dev

これで、開発サーバーは指定したポート番号で起動します。

方法2：package.jsonファイルを使用する

1. scripts オブジェクト内に以下のプロパティを追加します。

"scripts": {
  "dev": "vue-cli-service serve --port 8080" // ポート番号を指定
}

npm run dev

補足

• ポート番号が既に使用されている場合は、エラーが発生する可能性があります。その場合は、別のポート番号を指定してください。
• セキュリティ上の理由から、公開サーバーで開発サーバーを起動する場合は、適切なポート番号を選択してください。

Vue.js CLIプロジェクトでポート番号を変更する - サンプルコード

方法1：vue.config.jsファイルを使用する

module.exports = {
  devServer: {
    port: 8080 // ポート番号を8080に変更
  }
}

方法2：package.jsonファイルを使用する

"scripts": {
  "dev": "vue-cli-service serve --port 8080" // ポート番号を8080に変更
}

• 上記のコードは、Vue.js 2.xおよび3.xプロジェクトで動作します。
• 開発サーバーを別のホストで実行したい場合は、host オプションも設定できます。

Vue.js CLIプロジェクトでポート番号を変更する - その他の方法

.envファイルを使用する

• 以下の行を追加します。

VUE_APP_SERVER_PORT=8080

vue-cli-service serve --port 8080

ブラウザの設定を使用する

• ほとんどのブラウザでは、開発サーバーのポート番号を一時的に変更することができます。
• ブラウザの設定方法については、ブラウザのドキュメントを参照してください。

注意事項

• 上記の方法を使用する場合は、プロジェクトの設定ファイルを変更する必要があることに注意してください。
• 変更を加えた後は、必ず開発サーバーを再起動してください。