Search code examples
webpackvagrantvue.js

Why does LiveReload not work in vue-cli project with Vagrant?

This is the first time I try vue-cli, to avoid installing npm-packages globally I use 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 project and install:
vue init webpack my-project
npm install

Project structure: 

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

After running the command npm run dev appear two warnings:

(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.

But everything works 

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

And I can see running project on my localhost:4545

Running project

Then I edit Hello.vue file and save it. The browser does not change even if it is forced to restart.
In the terminal, also nothing changes it is in standby mode.

The browser does not change

The changes will be visible only if interrupt command npm run dev and run it again.

Solution

  • After struggling long with this, I finally found out how to do that. Do this:

    /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
  }
})