Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 673
dmin Avatar asked Jan 16 '17 22:01

dmin


People also ask

How do I run Vue project in production mode?

If we are using the full build i.e including Vue directly using the script tag without using a build tool, we should make sure we use the minified version (vue. min. js) for production. We can run the bundling command with the actual NODE_ENV environment variable set to "production".

How do I run Vue project in Terminal?

Very simple. To launch a VueJs project, you must type "npm run serve".

How do I run Vue project in browser?

Open in browser Once your Node server is running, you can view the project in your browser. I'm going to be using Google Chrome, but you can use whatever modern browser you want, though. To view the project, open a tab and type http://localhost:3000 into the URL bar.


1 Answers

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
  }
})
like image 117
Julian Avatar answered Sep 19 '22 08:09

Julian