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

Question

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

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

更新：

在一些Vue更新之后，它突然又开始工作了。我还是不知道这个的原因。它可能是vue-cli中的一个错误？

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

我的解决方案是： 在

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热重载工作没有sudo和没有民意调查！ ））））

我遇到的一种失败模式是你在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下），则需要将第一个解析为./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可能会发现情况并至少在开发模式下记录警告？

[BTW将devServer: { clientLogLevel: 'info' } }添加到vue.config.js非常有助于调试它。]

Answer 3

尝试退出当前终端，打开一个新终端并运行npm run serve命令。它对我有用。

Reference Link

祝好运...

Answer 4

也许这可以帮助https://webpack.js.org/configuration/watch/#changes-seen-but-not-processed

“验证系统中是否有足够的可用观察者。如果此值太低，Webpack中的文件观察者将无法识别更改：”

cat /proc/sys/fs/inotify/max_user_watches

“在macOS上，文件夹在某些情况下可能会被破坏。请参阅this文章。”

在上面的链接中，您可以检查其他已知问题。