webpack – 为什么LiveReload在Vagrant的vue-cli项目中不起作用?

这是我第一次尝试vue-cli,为了避免全局安装npm-packages我使用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安装

项目结构:

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

运行命令后,npm run 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运行dev并再次运行时,更改才会可见.

解决方法

经过长时间的努力,我终于找到了如何做到这一点.做这个:

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

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...