关于vue-cli3+webpack热更新失效及解决

关于vue-cli3+webpack热更新失效及解决，我将为您提供完整的攻略。

问题描述

在使用vue-cli3+webpack进行开发时，有时候会发现修改代码后页面没有自动刷新，导致热更新失效。这是因为webpack-dev-server的默认watch机制有问题，解决这个问题可以采用以下方案。

解决方案

方案一：关闭webpack的watch机制，使用webpack-dev-middleware手动编译打包文件

在vue.config.js文件中进行如下配置：

const webpack = require('webpack')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
      config.plugins.push(new webpack.HotModuleReplacementPlugin())
    }
  },
  devServer: {
    watchOptions: {
      ignored: /node_modules/,
      aggregateTimeout: 300,
      poll: 1000
    },
    before(app, server, compiler) {
      compiler.plugin('done', () => {
        const memFs = server._memFs = server._memFs || compiler.outputFileSystem
        Object.keys(memFs.data).forEach((filename) => {
          if (/\.html$/.test(filename)) {
            const rawData = memFs.data[filename]
            const data = (rawData instanceof Buffer) ? rawData.toString('utf-8') : rawData
            server.middleware.waitUntilValid(() => {
              server.middleware.invalidate()
              server.middleware.waitUntilValid(() => {
                memFs.writeFileSync(filename, data)
              })
            })
          }
        })
      })
    },
    hot: true
  }
}

这里我们做了一些打包编译的优化，配合webpack-dev-middleware手动编译打包文件。注意，如果发现编译过程中提示npm run serve编译错误无法解析.vue文件，需要在文件中加入这些代码：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new VueLoaderPlugin()
    ]
  }
}

方案二：修改webpack-dev-server的watchOptions配置

在vue.config.js文件中进行如下配置：

module.exports = {
  devServer: {
    watchOptions: {
      ignored: /node_modules/,
      aggregateTimeout: 300,
      poll: 1000
    },
    hot: true,
    inline: true,
    overlay: true
  }
}

重点在于watchOptions的配置，可以调整ignored属性来忽略不需要watch的目录文件，aggregateTimeout和poll值的调整可以影响文件监控的频率。