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

【问题标题】：Vue cli 3 hot reload suddenly not working in browsersVue cli 3 热重载突然无法在浏览器中工作
【发布时间】：2019-05-04 12:24:18
【问题描述】：

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

有什么建议可以让它再次工作吗？

更新：

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

【问题讨论】：

socket 是否在您的浏览器中正常运行？检查网络检查器，是否有错误？
套接字正在工作。调用 /sockjs-node/info?t=1543826222341 返回 200 OK。
如果您检查套接字，您是否看到从套接字服务器返回的调用带有重新加载消息和一些有关代码替换的信息？
我只看到一次带有以下请求的套接字调用：{"websocket":true,"origins":["*:*"],"cookie_needed":false,"entropy":2916256970}。所以对我的代码所做的更改不会产生新的套接字调用

标签： vue.js webpack-dev-server vue-cli vue-cli-3

【解决方案1】：

将NODE_ENV=development 添加到您的.env 文件将解决问题。

【讨论】：

【解决方案2】：

快跑

npm install -g @vue/cli-init

【讨论】：

请在您的答案中添加一些解释，以便其他人可以从中学习

【解决方案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
  }
}

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

不知道为什么，但这似乎对我有用。如果有人能解释它为什么起作用，我会很高兴。

【讨论】：

谢谢！它的实际意思是，与其打开 localhost:8080，不如打开 127.0.0.1:8080。我们曾经认为这两个地址是相同的，但对于 web socket 连接来说可能并非如此。我的问题是 Mac Safari 浏览器的问题，现在已经解决了。

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

【讨论】：

This answer from @createdbyjurand 应该允许您继续运行代理连接并进行热重载工作

【解决方案8】：

我的情况是什么原因：

好像值：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

但似乎即使我更改了值，当我重新启动我的电脑时，它也会回到默认值 16384。

如果你有 Linux 操作系统的解决方案（我的情况，我有 Manjaro）：

创建文件：

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

并用以下内容填充它：

fs.inotify.max_user_watches=200000

看来200000对我来说已经足够了。

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

【讨论】：

【解决方案9】：

我通过更改依赖项和 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-service”：“~4.1.0”但最近我意识到命令：npm install -g @vue/cli-init 解决了没有在 package.json 中手动更改任何内容的问题

【解决方案10】：

我希望这可以帮助某人，我在我的 WebStorm 中使用了终端并且 vue-cli-service 没有工作，然后我打开了一个普通的终端，就是这样，也许 WebStorm 中的某些东西没有在 vue-cli-service 中让正确的方式

【讨论】：

你是对的。似乎在 Terminal.app 上工作得很好，但在 WebStorm 集成终端上却不行。没有时间调查原因，但至少我可以确认。

【解决方案11】：

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

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

cat /proc/sys/fs/inotify/max_user_watches

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

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

【讨论】：

【解决方案12】：

我的问题是 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

:)

【讨论】：

很棒的发现，这对我有用！知道为什么吗？
我没有“服务”属性。
我已经找到了解决方法，但您的回答更加完整 +1 谢谢！
这也修复了运行 VPN 或 SSH 隧道时的热重载
VueJS3 没有第二个选项，第一个选项在尝试获取“ip”的控制台中返回错误。两个都解决不了。 ;(

【解决方案13】：

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 和 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（例如，一个顶级 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 对调试很有帮助。]

【讨论】：

我在 vue.config.js 中添加了devServer: { watchOptions: { poll: true } }，但还是不行。
我能理解你这是困扰很多人的问题，但我很高兴你在 build/dev-server.js:21 我在我的答案中输入的代码可能是它帮助你
我在 Windows 上工作，即使在我的配置中添加了监视选项，它也不起作用，很遗憾。
多个webpack可能存在问题
不，还没有。我尝试通过 CLI 3 创建一个新的 Vue 项目，并在那里进行热重载。我正在尝试找出差异。