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下一个），则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

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

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

不知道为什么，但是这似乎对我有用。我希望有人可以解释它为什么起作用。

Answer 4

我的原因是什么

似乎值max_user_watches 在/proc/sys/fs/inotify/max_user_watches中正在影响webpack =>，从而干扰了热重载。

检查您的实际值

$cat /proc/sys/fs/inotify/max_user_watches
16384

以我的情况为16384，但仍然不够。

我尝试了不同类型的解决方案，例如：

$ echo fs.inotify.max_user_watches=100000 | sudo tee -a /etc/sysctl.conf
$ sudo sysctl -p

但是，即使我更改了该值，当我重新启动PC时，它也会恢复为默认的16384。

解决方案，如果您使用Linux操作系统（我的情况下，我使用的是Manjaro）：

创建文件：

sudo nano /etc/sysctl.d/90-override.conf

并在其中填充：

fs.inotify.max_user_watches=200000

看来200000对我来说足够了。

创建文件并添加值后，只需重新启动PC即可。

Answer 5

set NODE_ENV=development可能会解决您的问题。

Answer 6

我在我制作的每个 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 7

尝试退出当前终端，打开一个新终端，然后运行isHidden(id) { let el = document.getElementById(id); return (el.offsetTop > 0) }命令。它对我有用。

Reference Link

祝你好运...

Answer 8

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

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

cat /proc/sys/fs/inotify/max_user_watches

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

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

Answer 9

我希望这可以对某人有所帮助，我曾经在WebStorm中使用过终端，而vue-cli-service无法正常工作，然后我打开了一个普通的终端，仅此而已，也许WebStorm中没有在vue-cli-service中使用正确的方式

Answer 10

我在Firefox浏览器中使用了代理扩展。如果有，请尝试将其关闭

Answer 11

请确保您的代码中没有任何错误。发生这种情况通常是因为我们任何代码文件中的错误。

Answer 12

就跑

npm install -g @vue/cli-init

Answer 13

我通过更改依赖项和devDependencies的版本解决了这个问题：

"dependencies": {
   "core-js": "^3.4.4",
   "vue": "^2.6.10",
 },
 "devDependencies": {
   "@vue/cli-plugin-babel": "~4.1.0",
   "@vue/cli-plugin-eslint": "~4.1.0",
   "@vue/cli-service": "~4.1.0",
   "babel-eslint": "^10.0.3",
   "eslint": "^5.16.0",
   "eslint-plugin-vue": "^5.0.0",
   "vue-template-compiler": "^2.6.10"
 },

Vue CLI 3热装突然在浏览器中不起作用

13 个答案:

我的原因是什么

解决方案，如果您使用Linux操作系统（我的情况下，我使用的是Manjaro）：