ローカルで実行されているフロントエンド コードに他のユーザーがアクセスできるようにする方法

場合によっては、フロントエンドでプロジェクトを作成し、その効果を他の人に見せたい場合、コードをテスト環境にデプロイすることを選択したり、IP を介して外部からアクセスできるようにすることを選択したりできますが、前提は同じローカル エリア ネットワーク (同じ A WiFi に接続するなど) の下にある場合、2 番目の方法を以下に紹介します。

dev コマンドを変更する

まず、ホストアドレスを変更する必要があります. ここでは、vue3 プロジェクトを例に取ります.

画像.png

次のようにページが開始された後

画像.png

通常、scriptdev コマンドはホストを指定せず、Local下に表示されているアドレスがデフォルトのアドレスです127.0.0.1. この時点で、この URL を他の人に送信しても、絶対に機能しません.

したがって、ホストを指定できます。たとえば0.0.0.0、すべての ip アクセスを許可します。

"dev": "vite --host=0.0.0.0",

ホストを変更した後、Windows システムの場合、ファイアウォールもオフにする必要があります (Apple では必要ありません)。プロジェクトを再起動して確認してください

QQ スクリーンショット 20230406204123(1)(1).png

モザイクが再生されるネットワーク上の Web サイトは、実際にはマシンの IP アドレスです。cmdウィンドウにコマンド プロンプトを入力し、入力してipconfigIP アドレスを検索します。Apple の場合は、小さな wifi アイコンをクリックしoption、キーを同時に押して、IP アドレスを見つけます。

他のパソコンや携帯電話からのアクセス

ブラウザに URL を入力して関連ページを表示します。この方法は、モバイル端末のデバッグにも適用できます。

スクリーンショット_2023-04-06-20-51-03-21_439a3fec0400f89.jpg

おすすめ

転載: blog.csdn.net/qq_34626094/article/details/130517131