Vueで固定IPアドレスを設定する方法

日々の開発では、ローカル開発環境での開発に Vue フレームワークを使用する必要がよくあります。開発プロセス中、Vue アプリケーションは外部アクセスをサポートしていないため、固定 IP アドレスを設定する必要があります。アクセスするには、この記事では、Vue で固定 IP アドレスを設定する方法を紹介します。

1. デフォルトのポートを変更します

アクセス アドレスは通常 http://localhost:8080 です。デフォルトのポート番号を必要なポート番号に変更できます。ここではポートを使用します。たとえば、具体的な操作は次のとおりです。

1. プロジェクトのルート ディレクトリにある config/index.js ファイルを開きます。
2. 次のコードに示すように、dev オブジェクトを見つけて、その port 属性の値を必要なポート番号に変更します。

dev: {
  port: 8000,
  // ...
}

3. ファイルを保存した後、次のコマンドを実行して再起動します。プロジェクトを開始します。

npm run dev

この時点で、アクセス アドレスは http://localhost:8080 から http:// に変更されます。 localhost:8000、その後の操作を容易にするため。

2. ホストの変更

同じ LAN 内の他のデバイスがアプリケーションにアクセスできるようにする場合、必要な固定 IP アドレスをホスト ファイルに追加できます。具体的な操作は次のとおりです。 :

1. システム検索バーにメモ帳と入力し、管理者として実行します。
2. C:\Windows\System32\driver\etc ディレクトリにある hosts ファイルを開きます。
3. ファイルの最後に次のコードを追加して、ドメイン名 localhost を必要な固定 IP アドレスにバインドします。

# 网站IP绑定
127.0.0.1       localhost
192.168.1.100   localhost

ここで、192.168.1.100 はバインドされた固定 IP アドレスであり、必要な IP アドレスに置き換えることができます。

4. hosts ファイルを保存した後、コンピューターを再起動します。
5. CMD またはターミナルを開き、ipconfig コマンドを入力し、現在接続している LAN を見つけて、IPv4 アドレスを記録します。
6. 次のコードに示すように、プロジェクト ルート ディレクトリの config/index.js ファイルで devServer オブジェクトを見つけ、そのホスト属性の値を IPv4 アドレスに変更します。

   devServer: {
     host: '192.168.1.100', // 记得替换成你的 IPv4 地址
     // ...
   }

プロジェクトを再実行し、ブラウザに

http://192.168.1.100:8000
7. と入力してアプリケーションにアクセスします。
3. 結論

上記は、Vue で固定 IP アドレスを設定する方法であり、これにより、同じ LAN 内の他のデバイスでアプリケーションに簡単にアクセスできるようになります。この記事が皆さんのお役に立てば幸いです。

以上がVueで固定IPアドレスを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。