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

Question

这是我第一次尝试 vue-cli，为了避免全局安装 npm-packages，我使用 Vagrant。

流浪文件

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 run dev后出现两个警告：

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

(node:1787) DeprecationWarning：不推荐使用未处理的承诺拒绝。将来，未处理的 Promise 拒绝将使用非零退出代码终止 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. vagrant 机器无法从主机获取有关更改的信息；
2. sockjs-node 可能是为 localhost 配置的。

解决方案

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 环境变量。最后在配置期间在 Vagrant guest 中将 CHOKIDAR_USEPOLLING=true 添加到 /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"
  }
}