Using latest vue.js bit and vue-cli to create a project, I immediately came up against HMR not reloading after making changes to .vue files.

What is HMR "Hot Reload" is not simply reloading the page when you edit a file. With hot reload enabled, when you edit a *. vue file, all instances of that component will be swapped in without reloading the page. It even preserves the current state of your app and these swapped components!

I started my project npm run serve, opened my browser http://localhost:8080 and navigated around my new app. Great. Within my IDE I modified any vue file, I could see that vue-cli-server (with it’s built in web server) identified that a file had changed and I could see webpack rebuilding my ts/js files. Great. I looked at the browser and my simple html change was not reflected. I could see errors in the chrome dev tools network tab like following.

[WDS] Disconnected net:: ERR_CONNECTION_TIMED_OUT http://192.168.1.102:8080/sockjs-node/info?t=1598645595925

###Solution There are a number of articles regarding setting NODE_ENV=development, as well as articles discussing the vue.config.js file. The solution for me was modifying the package.json script that is used by npm to start the project from

"serve": "vue-cli-service serve",

To

"serve2": "vue-cli-service serve --host localhost",

I also tried a number of options within the vue.config.js but was able to remove once I identified the solution (above).

// vue.config.js 
module.exports = {
    devServer: 
          {  //host:'localhost'  
              // useLocalIp: false,  
            // proxy: 'http://localhost:8080',  
            // public: '172.23.3.180:8080',  
            // watchOptions: {  
            // poll: true  
            // }  
            }, configureWebpack: {  
                      plugins: [
                      //new MyAwesomeWebpackPlugin()  
                      ] 
                  }
            }