I noticed today after creating a new vue project via “vue create new-app” that hot reload was not working while modifying html within App.vue. How can this be, it is brand new app on the latest bits. Following the instructions on cli.vuejs.org it states that vue-clie-service starts webpack-dev-server out of the box ”

The vue-cli-service serve command starts a dev server (based on webpack-dev-server) that comes with Hot-Module-Replacement (HMR) working out of the box.” Why. Brand new project, with the latest bits and it still did not work. I found 2 solutions. The first fix was for me, was to add a vue.config.js file to the root directory (alongside the package.json) and add the following devServer property

devServer: {          
    useLocalIp: false,   
        proxy: 'http://localhost:8080',   
        public: '172.23.3.180:8080'       
}

Note: the public ip address that I used here was from “IPv4 Address” after performing ipconfig in a command prompt. So documenting here will help me find/resolve this next week when this comes up again. But why, and why was it so difficult to find this resolution?

The second solution which I liked better (and seems faster) was as-follows. Again, a modification to the vue.config.js and also adding a new ‘script’ to package.json

configureWebpack: {
   devServer: {
      watchOptions: {
         poll: true
      }
   }
}

The script within package.json. Here you can see I am setting environment NODE_ENV to development using the cross-env npm package (I had to install via npm installl –save-dev cross-env)

"dev": "cross-env NODE_ENV=development vue-cli-service serve --open --host localhost"