解決したいこと

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 // ここを追加
  }
})

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で開発サーバーが立ち上がるはずです。