Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue cli 3 hot reload suddenly not working in browsers

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?

like image 912
Gilian Avatar asked Dec 03 '18 08:12

Gilian


People also ask

How do I enable hot reload in vue?

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 .

Does vue work in all browsers?

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.

Does VUEX support hot reloading?

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.


1 Answers

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 

:)

like image 108
createdbyjurand Avatar answered Sep 20 '22 14:09

createdbyjurand