It looks like this configuration has changed for each version of webpack, and the project created with vue-cli changes the way the webpack configuration is specified. I've tried all the solutions I've found on this site and they all appear to be targeting different versions of webpack.

I would like to completely turn off automatic reloading of my webpage when I make a change to a js file. I really don't mind hitting refresh myself, and the automatic reloading is often getting in the way.

I created my project with: npm install -g @vue/cli vue create my-project and I start my dev server with: npm run serve which calls: vue-cli-service serve It looks like I should be able to pass something in my vue.config.js file, but I can't figure out what. There is a section in there configureWebpack, but I tried putting various solutions in there, but my page still refreshes continually.

Thanks for any pointers! I have had a hard time finding up to date documentation on this.

EDIT:

I created a new project and I have the following vue.config.js file:

module.exports = {
  lintOnSave: false
}

I see by the instructions that I need to use:

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        hotReload: false // disables Hot Reload
      }
    }
  ]
}

But I'm not sure where that goes. I think that is describing a different config file.

Also, if I'm reading that correctly, that will only affect .vue files. What if I change a .js file?

It looks like this configuration has changed for each version of webpack, and the project created with vue-cli changes the way the webpack configuration is specified. I've tried all the solutions I've found on this site and they all appear to be targeting different versions of webpack.

I would like to completely turn off automatic reloading of my webpage when I make a change to a js file. I really don't mind hitting refresh myself, and the automatic reloading is often getting in the way.

I created my project with: npm install -g @vue/cli vue create my-project and I start my dev server with: npm run serve which calls: vue-cli-service serve It looks like I should be able to pass something in my vue.config.js file, but I can't figure out what. There is a section in there configureWebpack, but I tried putting various solutions in there, but my page still refreshes continually.

Thanks for any pointers! I have had a hard time finding up to date documentation on this.

EDIT:

I created a new project and I have the following vue.config.js file:

module.exports = {
  lintOnSave: false
}

I see by the instructions that I need to use:

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        hotReload: false // disables Hot Reload
      }
    }
  ]
}

But I'm not sure where that goes. I think that is describing a different config file.

Also, if I'm reading that correctly, that will only affect .vue files. What if I change a .js file?

• javascript
• webpack
• vue.js
• webpack-dev-server

• 4 Vue-cli's documentation clearly states "All options for webpack-dev-server are supported". But as far as I can tell, HMR is hard wired in vue-cli when in dev mode and there's no way to disable it with configuration options. Some are curious as to why one would want to disable it in dev. Speaking for myself, it seems to be the culprit for a number of memory issues and lock ups that manifests in my computer when the server is running. Quite annoying really, to the point that I'd rather press F5. – Michael Ekoka Commented Jun 1, 2019 at 15:40
• 3 Another perfect usecase for disabling HMR, is when chasing memory-leaks. You don't want HMR to hold on to objects thus creating more noice in the memory-dumps. – Carsten Hess Commented Jan 27, 2021 at 8:42

3 Answers 3

See https://github.com/vuejs/vue-cli/issues/4368#issuecomment-515532738

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

Got this from a conversation on reddit: NOTE: This works if you are not using the Vue dev server (Node express server). If you are using the Vue dev server, it may prevent the initial load of your app. In my case I am using a Tomcat server, so I have no problems with this method:

Put this in your vue.config.js

chainWebpack: config => {

    config.plugins.delete('hmr');
},

See: https://www.reddit.com/r/vuejs/comments/9njfl5/having_some_pain_disabling_the_hot_reloading/

edit: For the record, here is how I am running the Vue build in watch mode, using the "devw" script in my package json as shown below. This way vue rebuilds the pacakge after every code update, and I reload in my browser with Ctrl-F5. I am not using the "serve" script (which launches the Express server).

  "scripts": {
    "dev": "vue-cli-service build --mode development",
    "devw": "vue-cli-service build --mode development --watch ",  //USE THIS
    "serve": "vue-cli-service serve",   //DON'T USE
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },


[vue-cli-3]

You can disable hot reload by defining the following param in your config:

hotReload: false

Detailled instructions can be found in the official manual: