【Vite】開発サーバーのポート番号を変更する

更新日：2026/01/15

Viteはフロントエンド開発を効率よく進めてくれる便利ツールです。
特に便利なのは、開発用のWebサーバーが用意されていることでブラウザでのデバッグが容易に行える点です。

デフォルトでは、開発サーバーのURLは http://localhost:5173/ を使用します。
今回は、ポート番号を変更してみようと思う。

ポート番号を変更する方法

viteのコンフィグファイルを開き、 serverオプションのportを追加します。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3333,
  },
})

保存して、開発サーバーを起動します。

npm run dev

server.portオプションで指定したポート番号で接続されていることを確認しましょう。

> test@0.0.0 dev
> vite


  VITE v7.3.1  ready in 201 ms

  ➜  Local:   http://localhost:3333/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

複数の開発サーバーを起動するときは？

複数のプロジェクト開発を同時に進めている場合は、ポート番号を変更する必要はありません。
開発サーバー起動時にポートが使用されていると、次の番号で接続を試みます。

なお、server.portオプションで指定したポートが使用されていた場合も、同様に次の番号で接続を試みます。

思っていたのと違うポートを使用する可能性があるので、起動時に表示されるURLを確認したほうがよさそうです。

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。