Vagrantでvue-cliプロジェクトでLiveReloadが動作しないのはなぜですか？

Question

これは、vagrantを使用してnpm-packagesをグローバルにインストールすることを避けるため、vue-cliを初めて使用するときです。

Vagrantfile

Vagrant.configure("2") do |config| 
config.vm.box = "ubuntu/xenial64" 
config.vm.hostname="vagrant" 
config.vm.network "forwarded_port", guest: 8080, host: 4545 
config.vm.synced_folder ".", "/home/project" 
config.vm.provision :shell, path: "provision.sh", privileged: false 
end 

provision.sh

#!/usr/bin/env bash 

# installing packages 
sudo apt update 
sudo apt install build-essential libssl-dev -y 

# installing nvm 
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash 
source ~/.nvm/nvm.sh 

# installing node 
nvm install node 
nvm alias default node 
nvm use node 

# installing vue-cli 
npm install -g vue-cli 

初期化プロジェクトとインストール：
vue init webpack my-project
npm install

プロジェクト構造：コマンドNPMの実行DEVを実行した後

. 
├── my-project 
│   ├── build 
│   ├── config 
│   ├── index.html 
│   ├── node_modules 
│   ├── package.json 
│   ├── README.md 
│   ├── src 
│   ├── static 
│   └── test 
├── provision.sh 
└── Vagrantfile 

は、2つの警告表示されます。

(node:1787) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3

(node:1787) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

をしかし、すべては

DONE Compiled successfully in 4188ms 
> Listening at http://localhost:8080 

の作品

そして私はその後、私はHello.vueファイルを編集して保存

私localhost:4545

上でプロジェクトを実行している見ることができます。ブラウザは強制的に再起動しても変更されません。
端末では、スタンバイモードでも何も変更されません。

変更は場合にのみ、割り込みコマンドnpm run dev見えるようにして、もう一度それを実行します。

Answer 1

に以下を追加し、最終的にはIそれを行う方法を見つけました。これを行う：

/build/dev-serverJS

var devMiddleware = require('webpack-dev-middleware')(compiler, { 
    publicPath: webpackConfig.output.publicPath, 
    quiet: false, 
    stats: { 
    colors: true, 
    chunks: false 
    }, 
    watchOptions: { //Add Polling 
    aggregateTimeout: 300, 
    poll: true 
    } 
}) 

Answer 2

inotifyによる通知では、関連するファイルシステムのイベントをカーネルに認識させる必要がありますが、これはNFSなどのネットワークファイルシステムでは必ずしも可能ではありません。

Webpackは、ファイルが更新されたかどうかを確認するために数百ミリ秒ごとにチェックするようにポーリングする必要があります。あなたのwebpack.dev.conf.js

EDITの下に

watchOptions: { 
    poll: true 
} 

：LiveReloadクローム拡張ポートでリッスン35729.これで長い苦労した後、あなたのVagrantfile

config.vm.network "forwarded_port", guest: 35729, host: 35729