Vue cli 3热重载突然在浏览器中无法正常工作

Question

我有一个由Vue cli 3生成的Vue项目,我的热重装突然停止在我的浏览器中工作.终端仍然会选择对代码所做的更改,但是,我的浏览器没有获取更改.我必须手动刷新才能获取新的更改.正如其他一些人所建议的那样,我手动设置poll: true了我vue.config.js,我也尝试设置代理,但都没有成功.

有什么建议让这个工作再次成功吗？

Answer 1

我的问题是
显示的WDS 控制台:

[HMR] Waiting for update signal from WDS...
[WDS] Disconnected!
GET http://ip:port/sockjs-node/info?t=some-number
net::ERR_CONNECTION_TIMED_OUT sockjs.js?some-number

我的解决方案是:
in

package.json

更改

"serve": "vue-cli-service serve",

至

"serve": "vue-cli-service serve --host localhost",

或
添加

module.exports = {
  devServer: {
    host: 'localhost'
  }
}

至

vue.config.js

:)

Answer 2

HMR在各种环境中都有问题，在这些情况下，您可以使用民意调查选项帮助自己：

https://github.com/vuejs-templates/webpack/blob/develop/template/config/index.js#L21

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  stats: {
    colors: true,
    chunks: false
  },
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  }
})

看来我终于找到了它：我$cat /proc/sys/fs/inotify/max_user_watches当时是8192，这对我有帮助：

echo 100000 | sudo tee /proc/sys/fs/inotify/max_user_watches

现在，Vue hot reload可以在没有sudo和没有poll的情况下工作！））））

我在这里遇到的一种故障模式是，如果您设法在node_modules中安装了多个webpack，则最终失败了。

重新加载依赖于这两个互相发送事件的代码：

webpack-dev-server/client/index.js

    var hotEmitter = require('webpack/hot/emitter');
    hotEmitter.emit('webpackHotUpdate', currentHash);

webpack/hot/dev-server.js

    var hotEmitter = require("./emitter");
    hotEmitter.on("webpackHotUpdate", function(currentHash) {

但是，如果您安装了多个Webpack（例如，一个顶层和一个@ vue / cli-service下的一个），则require将解析第一个./node_modules/webpack/hot/emitter.js和第二个./node_modules/@vue/cli-service/node_modules/webpack/hot/emitter.js都不相同的对象，因此侦听器永远不会获取事件并重新加载失败。

为了解决这个问题，我刚刚卸载并重新安装了@ vue / cli-service，它似乎清除了package-lock.json并解析为单个顶级Webpack。

我不知道是否有任何方法可以确保不会发生这种情况-但是，vue-cli-3可能会发现情况并至少在开发人员模式下记录警告？

[顺便说一句，添加devServer: { clientLogLevel: 'info' } }到vue.config.js确实有助于调试。

Answer 3

我制作的每个 Vue 项目也有这个WDS 问题（有点烦人，即使使用最新的 vue cli 4.5.0 和 vue 2.6.11）。

所以下面的解决方案是我每次复制粘贴的。

在vue.config.js文件中：

module.exports = {
  devServer: {
    // Fixing issue with WDS disconnected and sockjs network error
    host: '0.0.0.0',
    public: '0.0.0.0:8080',
    disableHostCheck: true,
    // End of fix
  }
}

Answer 4

我遇到了同样的问题（控制台显示“[WDS] 已断开连接”的错误），这就是我所做的。请注意，我使用 Vue UI 工具来管理我的项目并且我没有编辑任何配置文件。

1. 在任务/服务下，我停止了任务。
2. 我点击了参数按钮，在“指定主机”标签的输入中，我添加了我的本地主机的 IP，即 127.0.0.1，在“指定端口”标签的输入中，我添加了 8080。
3. 我保存了参数并从该工具再次运行了服务器。

不知道为什么，但这似乎对我有用。如果有人能解释它为什么有效，我很乐意。