我有一个由Vue cli 3生成的Vue项目，我的热重新加载突然在浏览器中停止工作。对代码所做的更改仍然由终端接收，但是，我的浏览器没有接收这些更改。我必须手动刷新才能获得新的更改。根据其他人的建议，我在vue.config.js中手动设置了poll: true，我也尝试设置代理，但都没有成功。
有什么建议可以让它再次发挥作用吗？
更新：
经过一些Vue更新后，它突然又开始工作了。我仍然不知道这是什么原因。这可能是vue-cli中的一个错误？
我的问题是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
：)
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(例如，一个顶级的webpack和一个在@vue/cli服务下)，require将第一个解析为./node_modules/webpack/hot/emitter.js，第二个解析为不是同一对象的./node_modules/@vue/cli-service/node_modules/webpack/hot/emitter.js，因此侦听器永远不会得到事件，并且重新加载失败。
为了解决这个问题，我刚刚卸载并重新安装了@vue/cli服务，该服务似乎清除了package-lock.json并解析为单个顶级webpack。
我不知道是否有任何方法可以确保这种情况不会发生——然而，vue-cli-3可能会发现这种情况，并至少在开发模式下记录警告？
[BTW在vue.config.js中添加devServer: { clientLogLevel: 'info' } }对调试这一点非常有帮助。]
我遇到了同样的问题(控制台显示了一个错误，上面写着"[WDS]Disconnected")，下面是我所做的。请注意，我使用Vue UI工具来管理我的项目，并且我没有编辑任何配置文件。
- 在Tasks/serve下，我停止了任务
- 我点击了参数按钮；指定主机"；标签，我添加了我的本地主机的IP，即127.0.0.1；指定端口"；标签，我添加了8080
- 我保存了参数，并从该工具再次运行服务器
不知道为什么，但这似乎对我有效。如果有人能解释为什么有效，我会很高兴。
我做的每个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
}
}
我的情况是什么原因：
似乎：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
看起来20万对我来说已经足够了。
创建文件并添加值后，只需重新启动电脑，您就可以了。
也许这会有所帮助https://webpack.js.org/configuration/watch/#changes-已看到但未处理
"请验证您的系统中是否有足够的可用观察程序。如果此值过低，Webpack中的文件观察程序将无法识别更改：">
cat /proc/sys/fs/inotify/max_user_watches
"在macOS上，文件夹在某些情况下可能会损坏。请参阅本文。">
在上面的链接中，您可以查看其他已知问题。
set NODE_ENV=development可能会解决您的问题。
将NODE_ENV=development添加到.env文件中可以解决问题。
我希望这能帮助到一些人，我在我的WebStorm中使用了终端，vue-cli服务不起作用，然后我打开了一个正常的终端，就这样，也许WebStorm里的一些东西没有让vue-cli服务以正确的方式
我在Firefox浏览器中使用了代理扩展。如果你有一个，试着关掉它
请确保代码中没有任何错误。这种情况通常是由于我们的任何代码文件中出现错误。
您可以运行vue-cli-service serve --public localhost
根据文件：
--public specify the public network URL for the HMR client
https://cli.vuejs.org/guide/cli-service.html#vue-cli服务
无论如何，这是我的问题，出于某种原因，HMR在网络IP上运行。导致CORS和连接被拒绝的问题。
对我来说，Chrome中的More Tools >> Clear Browsing data做到了。之前也试着隐姓埋名。
在Firefox中一切都很好。
因此，在编辑vue.config.js之前，请先查看浏览器。
我通过更改依赖项和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"
},
只运行
npm install -g @vue/cli-init