このプロジェクトのフレームワーク (vue3): Vite + TS
構成がない場合、プロジェクトを実行した後、表示されるアクセス アドレスはローカル アクセス アドレスであり、他のユーザーはアクセスできません。
次のように：
他の人もアクセスできるようにする場合は、イントラネットの IP アクセス アドレスを設定する必要があります。設定方法は次のとおりです。
1.「vite.config.ts」ファイルを構成します
プロジェクトのルート ディレクトリにある「vite.config.ts」ファイルに、サーバー構成「host: '0.0.0.0'」を追加します。つまり、次のコードを追加します。
server: {
host: '0.0.0.0'
},
写真のように:
サーバー構成を追加した後、「 vite.config.ts 」ファイルを保存し、プロジェクトを再実行します - - - npm run dev
ローカル localhost アクセス アドレス + イントラネット アクセス アドレスが表示されます.この 2 つの方法のアクセス アドレスは次のとおりです。
このように、次の「ネットワーク」イントラネット アドレスを介して、他のユーザーも Web ページにアクセスできます。
2.「package.json」ファイルを構成する
「package.json」ファイルで、「dev」構成を次のように変更し、「--host 0.0.0.0」を追加します。
変更がない場合、「dev」項目の構成は次のようになります。
"scripts": {
"dev": "vite",
}
変更後:
"scripts": {
"dev": "vite --host 0.0.0.0",
}
図に示すように:
保存後、上記の方法 1 のようにプロジェクトを再実行します。ローカルとイントラネットの 2 つの形式のアクセス アドレスがあります。
イントラネット IP アクセスを設定した後、他のユーザーがアクセスできない: ファイアウォールが閉じられていない可能性があります
ネットワークを検索 --"マウスの右ボタンで [プロパティ] を選択 --" "Windows Defender ファイアウォール" --" "Windows Defender ファイアウォールを有効にするか閉じる" --" [Windows Defender ファイアウォールをオフにする] を選択 --" "OK" 、設定を保存します
次に、イントラネットの IP アドレスに再度アクセスすると、アクセスできるはずです。
写真のように:
