logo标签列表

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

vue.jswebpack-dev-servervue-clivue-cli-3
63

我的Vue项目是由Vue cli 3生成的，但是我的浏览器突然停止了热重载。代码更改仍然被终端捕获，但是我的浏览器没有捕获到更改。我必须手动刷新才能获取新更改。建议我在vue.config.js中手动设置poll: true，并尝试设置代理，但两者都没有成功。

有什么建议可以让这个功能再次工作吗？

更新：

经过一些Vue更新，它突然又开始工作了。我仍然不知道原因。可能是vue-cli中的错误吗？

你的浏览器中 socket 运行正常吗？请检查网络检查器，是否有错误？ - Ohgodwhy
套接字正在工作。调用/sockjs-node/info?t=1543826222341返回200 OK。 - Gilian
如果您检查套接字，是否会看到来自套接字服务器的调用返回，并带有关于代码替换的一些信息？ - Ohgodwhy
我只在以下请求中看到一次套接字调用：{"websocket":true,"origins":["*:*"],"cookie_needed":false,"entropy":2916256970}。因此，对我的代码所做的更改不会产生新的套接字调用。 - Gilian
我有同样的问题。使用 quasar vue-3。一切都很好，但突然间 Chrome 的实时更新停止工作了，每次更改组件后都需要刷新。尝试了所有建议的解决方案，但都没有对我起作用...还升级了 quasar 的版本。还有其他建议吗？ - Adi Gonnen
16个回答
107
我的问题是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'
  }
}

to

vue.config.js

:)

太好了，这对我有用！不过你知道为什么吗？ - Simopaa
1
这也修复了在运行 VPN 或 SSH 隧道时的热重载问题。 - camslice
对于其他尝试此修复方法的人，请注意您需要关闭+重新打开/重新加载浏览器选项卡以使新更改生效。之后，热重载应该可以正常工作。 :) - eriegz
2
VueJS3没有第二个选项，而第一个选项尝试获取“ip”时在控制台中返回错误。两者都没有解决。;( - Thiago Valente
当我添加了 vue-cli-service serve --https true 以便我们可以在本地使用HTTPS进行调试时，热重载就出问题了。添加 --host localhost 可以解决使用HTTPS时的热重载问题！ - Uber Schnoz
显示剩余4条评论
9

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可能会发现这种情况并在开发模式下至少记录警告吗？
[顺便说一句，在vue.config.js中添加devServer: { clientLogLevel: 'info' } }对于调试非常有帮助。]
我将 devServer: { watchOptions: { poll: true }} 添加到我的 vue.config.js 文件中，但是它仍然无法正常工作。 - Gilian
我能理解你的问题困扰了很多人，但是我想在 build/dev-server.js:21 中放置的代码（如上所述）可能会有所帮助。 - Ismoil Shifoev
我正在使用Windows工作，即使在我的配置中添加了观察选项，但不幸的是它仍然无法正常工作。 - Gilian
多个Webpack问题可能存在。 - Ismoil Shifoev
如果您对此有疑问，那么这是嵌套工作中的webpack问题。 - Ismoil Shifoev
显示剩余3条评论
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
  }
}
我正在使用Vue 2.5，我的Safari在macOS上失去了热重载功能。标志disableHostCheck: true为我解决了这个问题。谢谢@Earth_Believer。 - lucianokrebs
6

我遇到了同样的问题（控制台显示了一个错误，提示“[WDS] Disconnected”），以下是我的解决方法。请注意，我使用的是Vue UI工具来管理我的项目，并没有编辑任何配置文件。

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

我不确定为什么，但这对我来说似乎起作用了。如果有人能解释一下为什么它有效，我会很高兴。

谢谢！它实际上的意思是，不应该打开 localhost:8080，而是应该打开 127.0.0.1:8080。我们曾经认为这两个地址是相同的，但对于 Web Socket 连接来说可能不是这样。我的问题出现在 Mac Safari 浏览器中，现在已经解决了。 - andbi
3

我的情况是什么原因:

看起来/proc/sys/fs/inotify/max_user_watches中的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

看来这个值对我来说已经足够了。

在你创建文件并添加该值后，只需重新启动电脑，就可以正常运行了。

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

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

1
也许这可以帮助https://webpack.js.org/configuration/watch/#changes-seen-but-not-processed "请确认您的系统中有足够的可用观察者。如果此值过低，则Webpack中的文件监视器将无法识别更改:" cat /proc/sys/fs/inotify/max_user_watches "在macOS上，某些情况下可能会损坏文件夹。请参阅this文章。"
您可以在上面的链接中查看其他已知问题。
1
我几乎尝试了这里的其他15个解决方案，但没有一个对我起作用，结果发现是完全意想不到的事情。
我在他们的文档中找到了这个。 符号链接 如果你正在使用以下任何一种，热重载将无法工作：
  • npm link
  • yarn link
  • pnpm
  • cnpm
我的问题是我一直在使用pnpm install。然后我使用了命令pnpm install --shamefully-hoist。热重载开始无缝运行。 - undefined
0

我希望这能帮助到某些人。我在WebStorm中使用终端时，vue-cli-service无法正常工作，然后我打开了一个普通的终端，问题就解决了。可能是WebStorm中的某些设置阻止了正确的vue-cli-service使用方式。

你是正确的。似乎从Terminal.app可以正常工作，但无法从WebStorm集成终端中运行。我没有时间去调查为什么，但至少我可以确认。 - Paul-Sebastian Manole
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接