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()
]
