vue实现热部署

Vue 实现热部署的方法

热部署（Hot Module Replacement，HMR）允许在不刷新整个页面的情况下更新修改的模块。Vue CLI 和 Vite 默认支持 HMR，以下是具体实现方式：

使用 Vue CLI

Vue CLI 内置了 webpack 的 HMR 功能，无需额外配置。在开发模式下运行项目时，修改代码会自动触发局部更新。

启动开发服务器：

npm run serve

修改组件代码后，页面会自动更新而无需手动刷新。

使用 Vite

Vite 提供了更快的 HMR 体验。创建 Vite 项目时选择 Vue 模板即可自动支持 HMR。

启动开发服务器：

npm run dev

修改文件后，Vite 会立即反映变更，速度比传统打包工具更快。

自定义配置

如果需要手动配置 HMR，可以在 webpack 或 Vite 配置文件中添加相关设置。

webpack 配置示例（vue.config.js）：

module.exports = {
  devServer: {
    hot: true
  }
}

Vite 默认开启 HMR，无需额外配置。

注意事项

• 确保开发环境正确运行，生产环境不需要 HMR。
• 某些复杂状态可能需要在 HMR 后手动重置。
• 如果 HMR 不生效，检查浏览器控制台是否有错误信息。

高级用法

对于需要自定义 HMR 行为的场景，可以使用 Vue 的 module.hot API：

if (module.hot) {
  module.hot.accept('./component.vue', () => {
    // 自定义更新逻辑
  })
}

这种方式适用于需要精细控制更新流程的情况。