Vue Cli4 热更新失效

在VScode中，需要保存文件后自动刷新浏览器的内容，否则还得手动刷新浏览器，给开发造成极大的不便。我们要在项目根目录下找到vue.config.js（若没有这个文件，则新建一个），增加 hot: true。

module.exports = {
  devServer: {
    port: 3000,
    open: true,
    hot: true,//自动保存
  },
}

再重新加载项目即可。

有时这样任然无法解决问题，原因好像在于版本问题。

解决办法：

1. 安装依赖 webpack-dev-server：npm install --save-dev webpack-dev-server

2. 配置 vue.config.js：

    module.exports = {
      devServer: {
        port: 3000,
        open: true,
        hot: true,//自动保存
      },
    }
   

3. 配置 package.json：

   "scripts": {
     // 修改 serve
     "serve": "vue-cli-service serve && webpack-dev-server --open ",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   

4. 重新启动项目