Vue - ip, localhost を使用して同時にプロジェクトにアクセスする

GitHub デモアドレス

オンライン プレビュー

順序

localhost を介して実行すると、ローカルでのみアクセスできます。他のデバイスでデバッグにアクセスする必要がある場合があり、この場合は IP アドレスを介してアクセスする必要があります。

効果：

解決：

ステップ1：

ステップ 1 の2 つの方法 ( 1)、方法1、 )2)、方法2のいずれかを使用します。

1)、方法 1 (推奨)

最初にパスconfig/index.jsの変更host
host: 'localhost' を変更しますhost: '0.0.0.0',

この時点で実行すると、結果は次のようになります。

ただし、自動的に開く Web ページは 0.0.0.0 から始まります。自動的に開く Web ページを IP アドレスを表示するように変更するには、次の手順を実行する必要があります。

パスbuild/webpack.dev.conf.jsを追加すると、devServer ip:port の形式でページが開きます。また、localhost:port または 127.0.0.1:port からページを開くこともできます。useLocalIp:true,

2)、方法 2

ファイルに追加することもできますpackage.jsondev--host 0.0.0.0"

 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

ステップ2：

build/webpack.dev.conf.jsパスを変更するmessages

  // messages: [
  //   `Your application is running here: 
  //   http://${devWebpackConfig.devServer.host}:${port}`
  // ]
  messages: [
    `Your application is running here: `,
    `Local: http://localhost:${
      
      port}`,
    `Network: http://${
      
      require('ip').address()}:${
      
      port}`,
  ],

最終的な実行効果:

このとき、実行時に自動的に開かれるプロジェクトもローカル IP のアドレスです。