Почему LiveReload не работает в проекте vue-cli с Vagrant?

Question

Это первый раз, когда я пытаюсь vue-cli, чтобы избежать установки npm-пакетов во всем мире, я использую Vagrant.

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 

проект Init и установить:
vue init webpack my-project
npm install

Структура проекта:

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

После запуска команды НПМ запуска Dev появляются два предупреждения:

(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 

И я могу видеть, работает проект по моей localhost:4545

Затем я редактирую Hello.vue файл и сохранить его. Браузер не изменяется, даже если он принудительно перезапускается.
В терминале также ничего не меняется, он находится в режиме ожидания.

Изменения будут видны только тогда, когда команда прерывания npm run dev и запустить его снова.

Answer 1

После борьбы долго с этим, я, наконец, узнали, как это сделать. Сделайте это:

/build/dev-server.JS

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 проверил каждые несколько сотен миллисекунд, чтобы узнать, были ли ваши файлы обновлены.

watchOptions: { 
    poll: true 
} 

в нижней части webpack.dev.conf.js

EDIT: LiveReload Chrome Extension прослушивает порт 35729. Добавьте следующую строку в ваш Vagrantfile

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