I have a Vue project generated by the Vue cli 3 and my hot reloading suddenly stopped working in my browsers. Changes made to the code are still picked up by the terminal, however, my browser is not picking up the changes. I have to manually refresh in order to pick up the new changes. As suggested by some others I manually set poll: true
in my vue.config.js
and I also tried to set the proxy, but both had no success.
Any suggestions to make this work again?
Update:
After some Vue updates, it suddenly started working again. I still don't know the reason for this. It might have been a bug in the vue-cli?
When scaffolding the project with vue-cli , Hot Reload is enabled out-of-the-box. When manually setting up your project, hot-reload is enabled automatically when you serve your project with webpack-dev-server --hot . Advanced users may want to check out vue-hot-reload-api , which is used internally by vue-loader .
First of all, let me make it clear here that out-of-the-box Vue. js framework is pretty cross browser compatible. Nearly all basic components are supported by all major browsers that support JavaScript.
Vuex supports hot-reloading mutations, modules, actions and getters during development, using webpack's Hot Module Replacement API. You can also use it in Browserify with the browserify-hmr plugin. Checkout the counter-hot example to play with hot-reload.
My problem was WDS
Console displayed:
[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
Solution for me was:
in
package.json
change
"serve": "vue-cli-service serve",
to
"serve": "vue-cli-service serve --host localhost",
or
add
module.exports = { devServer: { host: 'localhost' } }
to
vue.config.js
:)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With