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.



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",


"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: {
        //useLocalIp: false,
        //proxy: 'http://localhost:8080',
        //public: '',
        //watchOptions: {
        // poll: true
configureWebpack: {
        plugins: [
            //new MyAwesomeWebpackPlugin()



Comments are closed

About Us

Web/Mobile Solutions

Our Contacts

Cincinnati, OH 45069