【Vue3/Vite】スマホでlocalhostを確認する方法

はじめに

レスポンシブのWebアプリを作成していると、ローカルで開発中の状態を実機のスマホで確認したいと思うことはありませんか？？

はい！私はあります。

とてつもなく簡単なんですが、意外と詰まったので共有しようと思います。

前提

スマホとPCで同じWifiを利用していること

スマホでlocalhostを確認する手順

1. --hostを追加する

普段通りnpm run devをすると、下記のように表示されませんか？？

  VITE v4.0.4  ready in 220 ms

  ➜  Local:   http://127.0.0.1:3000/
  ➜  Network: use --host to expose
  ➜  press h to show help

上記に書いている通り--hostをオプションとして追加することで表示されるURLにスマホでアクセスすることで、PCで表示しているローカルページがひらけます。

npm run dev --host
 ➜  Local:   http://localhost:3000/
 ➜  Network: http://IPアドレス:3000/

2. vite.config.jsに追記する

もしviteを使っているのであれば、ルートディレクトリにvite.config.jsが存在しているのではないでしょうか？

同ファイルのdefineConfigの中のserver.hostをtrueにすることでも1番の--hostをつけているように、NetworkのURLが表示されます。

import { defineConfig } from "vite";

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

npm run dev
 ➜  Local:   http://localhost:3000/
 ➜  Network: http://IPアドレス:3000/