为什么LiveReload不能在Vagrant的vue-cli项目中工作？

Question

这是我第一次尝试使用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

初始化项目并安装：
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

运行命令 npm后，运行dev 会出现两个警告：

  

（node：1787）UnhandledPromiseRejectionWarning：未处理的承诺拒绝（拒绝ID：1）：错误：退出代码3

     

（node：1787）弃用警告：不推荐使用未处理的拒绝承诺。将来，未处理的承诺拒绝将使用非零退出代码终止Node.js进程。

但一切正常

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

Vue CLI 3.0.0解决方案

有两个要解决的问题：

1. 无用机器无法从主机获取有关更改的信息；
2. sockjs节点可能已配置为本地主机。

解决方案

1. 为webpack设置池；
2. 在webpack devServer配置中设置公共地址。

在项目主目录中创建 vue.config.js 文件：

module.exports = {
  configureWebpack: {
    devServer: {
        watchOptions: {
          ignored: ['node_modules'],
          aggregateTimeout: 300,
          poll: 1500
        },
        public: '192.168.56.132' // vagrant machine address
    }
  }
}

Answer 3

通过inotify通知要求内核了解所有相关的文件系统事件，这对于网络文件系统（如NFS）并不总是可行。

您将需要轮询，因此Webpack将每隔几百毫秒检查您的文件是否已更新。

 watchOptions: {
   poll: true
 }

到webpack.dev.conf.js

的底部

编辑：LiveReload Chrome扩展程序侦听端口35729.将以下内容添加到您的Vagrantfile

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

Answer 4

@ vue / cli 4.2.3

我刚在Vagrant上使用@ vue / cli 4.2.3发生了我的事情。

首先，我使用了CHOKIDAR_USEPOLLING env变量。最终在供应期间将CHOKIDAR_USEPOLLING=true添加到了Vagrant guest虚拟机的/etc/environment中。

这允许在主机的浏览器中看到实时更改，但需要刷新。将devServer.public Vue配置设置为0.0.0.0:8080解决了该问题。

TL; DR

在 / etc / environment 中：

CHOKIDAR_USEPOLLING=true

在 vue.config.js 中：

module.exports = {
  devServer: {
    public: "0.0.0.0:8080"
  }
}