vue-cliでローカル実行する際のポート番号変更方法
開発中はvue-cliでローカル実行しながらデバッグを行うかと思います。 vue-cliはデフォルトで8080のポートを利用していますが、他の用途でこの番号を使っている場合は別の番号を指定する必要があります。
デフォルトの挙動
$ yarn serve # yarnを利用していない場合は vue serveで実行 App running at: - Local: http://localhost:8080/ - Network: http://xxx.xxx.xxx.xxx:8080/
対応方法
プロジェクトのルートディレクトリ1にvue.config.jsを作成し、以下のように記載します。ここでは8089を指定していますが、好きな値に変更してください。
module.exports = {
devServer : {
port: 8089
}
}
すでにvue.config.jsがある場合は、devServer: { port:8089 }の部分を追記してください。
これでポート番号が変更されます。
$ yarn serve # yarnを利用していない場合は vue serveで実行 App running at: - Local: http://localhost:8089/ - Network: http://192.168.162.51:8089/ #### 備考 vue-cli 3からはvue.config.jsを参照するように変更されました。 古い記事ですとconfig/index.jsを作成する例がありますが、設定方法が変更されているので注意しましょう。(stackoverflow)[https://stackoverflow.com/questions/47219819/how-to-change-port-number-in-vue-cli-project]でも回答が古く、コメント欄のみでvue.config.jsを使った方法が言及されていました。 その他、設定ファイル内に記載できる値は(公式サイト)[https://cli.vuejs.org/config/]をご確認ください。
