Disabling hot reload for vue.js website with raw-loader for production-like environments

Question

I have a legacy vue.js app running on staging and testing servers.

The problem is that Network console is spammed with https://localhost/sockjs-node/info?t=1602594418799 requests in the browser and, of course, they fail because they refer to an URL that is not available in the browser.

I would like to disable HMR completely for some of those production-like (but not exactly) environments.

The website is being served with the following command: yarn vue-cli-service serve --port 8080 --mode production

For some reason, mode production alone does not disable HMR.

I have tried different approaches as recommended on the Internet.

So,

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

disables actual hot refresh for devServer running mode, but does not disable HMR - still seeing those /info requests.

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: 'Cannot set property hotReload of undefined', maybe because my project uses 'raw-loader' instead of vue-loader.

Yet another solution:

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

did not work. Don't know why.

One more solution:

process.env.NODE_ENV === 'production'

this works, no more /info spam.

But there's a problem. I need NODE_ENV like staging, testing and want to disable HMR for those.

How do I do that? How do I tell vue.js and/or webpack to treat NODE_ENV staging etc. the same way as production? Alternatively, how do I disable HMR based on some other custom environment variable?

Answer 1

So, it seems the best I could do was to run yarn build and then serve the dist folder on nginx or Apache or nodejs static HTML server.

Still curious, why vue.js (or webpack or whatever) doesn't behave the same way when I run the website through vue-cli with mode production.

It's unintuitive; I expected mode production to work exactly the same as after building the site and hosting on any other server.