Vue-cli: 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.

[sodatea]

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?