vue实现热更新

Vue 热更新实现方法

热更新（Hot Module Replacement, HMR）是指在应用运行过程中替换、添加或删除模块，而无需重新加载整个页面。Vue 通过 Vue CLI 和 webpack 提供了开箱即用的热更新支持。

使用 Vue CLI 创建项目

Vue CLI 内置了 webpack 的热更新功能，创建项目时会自动配置好 HMR。

vue create my-project
cd my-project
npm run serve

运行 npm run serve 后，修改组件代码会触发热更新，页面无需刷新即可看到变化。

手动配置 webpack 热更新

对于自定义 webpack 配置的项目，需要手动设置 HMR。

安装必要依赖：

npm install webpack webpack-dev-server webpack-hot-middleware vue-loader --save-dev

配置 webpack.dev.js：

const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'development',
  entry: [
    'webpack-hot-middleware/client',
    './src/main.js'
  ],
  devServer: {
    hot: true,
    open: true
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
}

配置 main.js 启用 HMR

在项目入口文件中添加 HMR 相关代码：

import Vue from 'vue'
import App from './App.vue'

const app = new Vue({
  render: h => h(App)
}).$mount('#app')

if (module.hot) {
  module.hot.accept('./App.vue', () => {
    app.$destroy()
    new Vue({
      render: h => h(App)
    }).$mount('#app')
  })
}

解决常见热更新问题

组件状态丢失：使用 vue-hot-reload-api 保持状态

npm install vue-hot-reload-api --save-dev

在组件中添加：

if (module.hot) {
  const api = require('vue-hot-reload-api')
  api.install(Vue)

  if (!api.compatible) {
    throw new Error('vue-hot-reload-api is not compatible with the version of Vue you are using.')
  }

  module.hot.accept()
}

样式不更新：确保 style-loader 配置正确

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader'
  ]
}

优化热更新速度

使用 cache-loader 缓存编译结果：

npm install cache-loader --save-dev

配置 webpack：

{
  test: /\.vue$/,
  use: [
    'cache-loader',
    'vue-loader'
  ]
}

启用持久化缓存：

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')

plugins: [
  new HardSourceWebpackPlugin()
]