vue实现热插拔
Vue 热插拔实现方法
热插拔（Hot Module Replacement, HMR）允许在应用运行时替换、添加或删除模块，而无需完全刷新页面。Vue CLI 和 Vite 内置支持 HMR，以下是具体实现方式：
使用 Vue CLI 实现
Vue CLI 项目默认启用 HMR，无需额外配置。开发模式下，修改组件或文件时会自动触发热更新。
// vue.config.js
module.exports = {
devServer: {
hot: true // 默认已启用
}
}自定义 HMR 处理可通过以下方式：
if (module.hot) {
module.hot.accept('./component.vue', () => {
// 自定义更新逻辑
})
}使用 Vite 实现
Vite 内置 HMR 支持，开箱即用。对于 Vue 单文件组件（SFC），修改后会立即反映在浏览器中。
// vite.config.js
export default {
server: {
hmr: {
overlay: false // 禁用错误遮罩层
}
}
}手动配置 Webpack
非脚手架项目中需手动配置：
// webpack.config.js
const webpack = require('webpack')
module.exports = {
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
hot: true
}
}Vue 组件需添加 HMR 支持：
const component = {
template: '<div>...</div>'
}
if (module.hot) {
module.hot.accept(['./component'], () => {
// 重新渲染组件
})
}状态保持技巧
HMR 时保持组件状态：
export default {
data() {
return { count: 0 }
},
created() {
if (this.$vnode && this.$vnode.data.keepAlive) {
// 从缓存恢复状态
}
}
}注意事项
- 生产环境应禁用 HMR
- 复杂状态对象可能需要手动处理更新
- CSS 的热更新通常自动处理
- 使用
vue-loaderv15+ 版本可获得最佳 SFC 支持
以上方法适用于大多数 Vue 2 和 Vue 3 项目，具体实现可能因构建工具版本略有差异。
