vue实现前端热更新

Vue 前端热更新实现方法

使用 Vue CLI 内置的热更新功能 Vue CLI 项目默认集成了 webpack-dev-server，开发模式下会自动启用热模块替换（HMR）。启动开发服务器时，修改代码后浏览器会自动更新变化部分而无需刷新整个页面。

npm run serve

配置 vue.config.js 自定义 HMR 行为 可通过 devServer 选项调整热更新配置，例如设置更快的检测间隔或禁用某些模块的 HMR：

module.exports = {
  devServer: {
    hot: true,
    watchOptions: {
      poll: 1000 // 每秒检查一次文件变化
    }
  }
}

手动处理模块热替换 对于自定义模块或需要特殊处理的组件，可在入口文件添加 HMR 相关代码：

if (module.hot) {
  module.hot.accept('./path/to/MyComponent.vue', () => {
    require('./path/to/MyComponent.vue')
    // 执行自定义更新逻辑
  })
}

使用 Vite 的即时热更新 Vite 提供更快的热更新体验，在 vite.config.js 中无需额外配置即可支持：

npm run dev

生产环境实现热更新方案 通过 WebSocket 建立客户端与服务端通信，监听版本变更并提示用户刷新：

const socket = new WebSocket('ws://your-server')
socket.onmessage = (e) => {
  if (e.data === 'update') {
    showUpdateNotification()
  }
}

注意事项

• 热更新可能导致状态丢失，复杂场景建议配合 vuex/pinia 状态管理
• CSS 热更新通常可直接生效，但某些预处理器可能需要额外配置
• 动态导入的组件需要确保热更新边界正确设置