【Vue3】npm run dev した際のportを固定にする方法

解決したいこと

• npm run devを実行するとportが固定されずに変動してしまう
  • http://localhost:5173/ → http://localhost:5174/ → http://localhost:5175/ ・・・
  • ↑開こうとしているポート番号がすでに使用されている場合、vueはその次のポート番号でポートを開こうとするため

原因

• vite.config.tsで解放するポートを固定値で指定していなかったため
  • 固定値で指定すればそのポート番号が使用されている場合は、新たなポート番号を使用するのではなく、エラーを返すようにできる

具体的なやり方

vite.config.ts

export default defineConfig({
  plugins: [vue()],
  server: {  
    port: 5173,  // ここを追加
    strictPort: true // ここを追加
  }
})

固定値を指定した後で npm run dev がエラーになる場合

• 固定値で指定したポート番号(今回の場合は5173)に関連するプロセスを終了させることでポートを解放させることで解決できます

1. ターミナルで以下のコマンドを実行して、ポート5173を使用しているプロセスを見つけます。

zsh

lsof -i :5173

2. コマンドの出力から、該当するプロセスのPID（プロセスID）を探します。通常は出力の2行目にあります。例えば以下のような出力があった場合

zsh

COMMAND  PID     USER   FD   TYPE   DEVICE SIZE/OFF NODE NAME
node    12345   user   23u  IPv4  12345678      0t0  TCP *:5173 (LISTEN)

3. 次に、以下のコマンドを実行して、該当するプロセスを強制終了します。の部分に先ほど見つけたPIDを入れてください。

zsh

kill -9 <PID>

例えば、上記の例では以下のコマンドを実行します。

zsh

kill -9 12345

4. プロセスが終了したことを確認したら、もう一度npm run devを実行してください。これでポート5173で開発サーバーが立ち上がるはずです。