How I disable the HMR temporarily?

[lwxbr]

What problem does this feature solve?

The problem I have is that I don't know how to disable Hot Module Replacement ( aka HMR) in vue-cli service. I tried to follow this thread but I didn't gone too far: https://stackoverflow.com/questions/52766802/how-do-i-disable-hot-module-replacement-with-vue-cli-service-serve.

PS.: The purpose of this is that I want to continue the development of my application and the designer that is in another computer, seeing my machine in my ip will style the application. When I save the application, the HMR cleans the css of the inspector and the designer lost the CSS he did in it.

Hope for a better comprehension. Suggestions are welcome.

What does the proposed API look like?

I guess other people might suffer from same issue.

[haoqunjiang]

I don't think such workflow makes sense and I'm strongly against this approach.
You and the designer may better not share the same dev server. Build a snapshot version and serve the dist folder for them.

---

Nonetheless, hot reload can be disabled with the following config:

module.exports = {
  devServer: {
    hot: false,
    liveReload: false
  }
}

(The console message still presents but there won't be actual module replacements happening)

[lwxbr]

@sodatea, thanks for the help!

[txiaocao]

invalid configuration...always has the ws://localhost:11117/sockjs-node/009/umr1d0xa/websocket

[progmars]

So,

module.exports = {
  devServer: {
    hot: false,
    liveReload: false
  }
}

disables hot reload for devServer mode, but does not disable HMR of webpack - still have those /info requests in the browser.

Another solution:

 chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          options.hotReload = false
          return options
        })
  }

does not work in my case because my project uses 'raw-loader' instead of vue-loader, and it does not have hotReload option.

Another solution:

chainWebpack: config => {
    config.plugins.delete('hmr');
},

did not work.

One more solution:

vue-cli-service serve --mode production
did not work, still HMR is activated.

One more solution:

process.env.NODE_ENV === 'production'

this finally works, yay - no more /info requests... but there's a problem - what if we need NODE_ENV like staging, testing and want to disable HMR for those? How to solve this correctly?

[GrahamLea]

One more solution:
process.env.NODE_ENV === 'production'
this finally works, yay

For those looking to try this solution temporarily (which we needed to do to test our CSP), you can drop this into your .env.development and restart (npm run serve):

NODE_ENV=production

[hron84]

Guys, someone can tell me what configuration files you talking about? I tried to put those config snippets to my webpack config, but nothing happens. But since nobody told me which configuration file I should edit, I honestly can't test these on my instance.

[tpluscode]

I found that only this worked for me to completely disable the live-reload

module.exports = {
  devServer: {
+   webSocketServer: false
  }
}

(my issue was that running over HTTPS in a container would break the app when it tried to access insecure ws:// sockets)

[dabyland]

I found that only this worked for me to completely disable the live-reload

module.exports = {
  devServer: {
+   webSocketServer: false
  }
}

(my issue was that running over HTTPS in a container would break the app when it tried to access insecure ws:// sockets)

After searching far and wide, this is was the solve for me. Changes are still detected upon saving which recompiles our app but the annoying "HMR" messages no longer spam the console.

Thanks @tpluscode!