Turn off hot reload on project started with vue-cli 3 (webpack 4.15.1)

Question

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?

Answer 1

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

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

Answer 2

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]