【Vue3×Vite】 IPネットワークを表示する設定

①vite.config.jsファイルを開く。
②serverオブジェクト内にhostプロパティを追加し、表示したいIPアドレスを指定。
例えば、0.0.0.0を使用すると、すべてのネットワークインターフェースからの接続を受け付けることができる。

export default defineConfig({
  server: {
    host: '0.0.0.0',
  },
});

③保存してvite.config.jsファイルを閉じる。
④ターミナルでnpm run devを実行して、Vite開発サーバーを起動。

npm run dev

⑤Vite開発サーバーが起動した後、コンソールに表示されるアドレスにアクセスすると、IPネットワーク上でアプリケーションが実行される。
例えば、http://192.168.1.100:3000のようなアドレスにアクセスすることができる。
この設定により、特定のIPアドレス上でViteプロジェクトが実行され、ローカルネットワーク内の他のデバイスからもアクセスできるようになる。
ただし、Vite開発サーバーはデフォルトではセキュアな接続ではないため、プロダクション環境で使用する際には注意が必要。