Vue CLI 4 Configuration for Hot Module Replacement Failure or Not Updating in Time

Official documentation:

vue-cli-service serve command starts a development server (based on webpack-dev-server

) with out-of-the-box Hot-Module-Replacement.

(My problem seemed to be not installed. Check it yourself.)

Webpack 4.0 requires manual configuration to enable hot update; it is not enabled by default.

Solution
1. Install the webpack-dev-server dependency
Install according to your situation using npm / cnpm
npm install --save-dev webpack-dev-server 

cnpm install --save-dev webpack-dev-server
2. Configure the vue.config.js file
Since vue-cli 4 folder structure is quite different from before, you need to configure relevant parameters in vue.config.js and add the devServer configuration.

module.exports={
  devServer: {
    hot:true,
    open:true,
    compress: true,
    disableHostCheck: true // Enable hot update for webpack4
  }
}

Configure the script in package.json

"serve": "vue-cli-service serve && webpack-dev-server --open", 

npm run serve