Vue3×Vite開発サーバーのポート番号を変更する方法

開発中のVue 3プロジェクトで、ローカル環境で開発サーバーを起動すると、デフォルトではポート番号が http://localhost:3000/ のように設定されます。しかし、私の場合他のプロセスで使用しているのかhttp://localhost:5173/となっていました。
このポート番号が気になる場合や、既に使用されている別のポート番号を利用したい場合には、簡単に変更することができます。

Vue3プロジェクトの設定ファイルである vite.config.js を編集します。以下の手順でポート番号を変更することができます。

1. vite.config.js ファイルを開きます。
2. server オプション内に port プロパティを追加します。例えば、ポート番号を 3000 に変更する場合は、以下のように設定します
3. ファイルを保存し、開発サーバーを再起動します。
4. これで開発サーバーは新しいポート番号で起動されます。たとえば、ポート番号を 3000 に変更した場合、アプリケーションには http://localhost:3000/ でアクセスすることができます。

vite.config.js

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 3000
  }
})

注意点として、変更したポート番号がすでに使用されている場合や、他のアプリケーションと競合する可能性がある場合は、別のポート番号を選択する必要があります。

以上が、Vue 3開発サーバーのポート番号を変更する方法です。