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
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 changes will be visible only if interrupt command npm run dev
and run it again.
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".
Very simple. To launch a VueJs project, you must type "npm run serve".
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.
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
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With