跳转到内容
VPT

小程序开发热更新

create-vite-taro 模板已经启用小程序开发者工具热更新，无需额外配置。

使用

Section titled “使用”
终端窗口
pnpm dev:wx
pnpm dev:zfb
pnpm dev:tt

等待构建完成，在对应开发者工具中打开生成目录：微信 dist/wx、支付宝 dist/zfb、抖音 dist/tt。

保存 JavaScript、TypeScript、React 组件或样式后，当前开发者工具会自动显示更新。

选择热更新模式

Section titled “选择热更新模式”

devtools（仅支持微信）：通过开发者工具重新注册 Page 并保留应用和页面状态，更新更快、开发运行时更小。

hmr: {
    mode: 'devtools'
}

interpreter（支持所有小程序）：通过解释器在当前 App 中执行更新并保留状态，不重新注册 Page，但更新更慢、开发运行时更大。

hmr: {
    mode: 'interpreter'
}

rebuild：每次有效源码变化都重新生成完整原生项目并重启 App，不保留运行状态。

hmr: {
    mode: 'rebuild'
}

不需要热更新时：修改后自动重新构建

Section titled “不需要热更新时：修改后自动重新构建”

如果不需要热更新或保留运行状态，例如让 AI 批量修改代码时，也可以使用 Vite 原生的 --watch，在文件修改后自动重新构建：

终端窗口
pnpm build:wx --watch
pnpm build:zfb --watch
pnpm build:tt --watch

这会运行 vite build --watch，在源码变化后重新构建当前目标的 dist/...，并重启应用，不保留运行状态，适合 AI 批量修改代码的场景。

区别在于：build:... --watch 打包的是生产版本，而对应 dev:... 下的 hmr.mode: 'rebuild' 打包的是开发版本。

微信、支付宝和抖音监听构建会自动关闭生成项目配置中的开发者工具热重载，避免它干扰完整重建；微信和抖音的私有热重载设置也会被覆盖。抖音的自动编译设置保持原值。切回 dev:... 后使用 vite.config.ts 中原有的配置，无需手动切换。具体字段见项目配置。

保留的状态

Section titled “保留的状态”

普通热更新会保留：

  • App 和 globalData；
  • 当前页面及其参数；
  • 兼容更新下的 React Hook 状态；
  • 页面中的输入内容。

热更新产生的页面替换不会重复调用业务 onUnload、onLoad 和 onShow。正常跳转、返回和重新进入页面时，生命周期仍照常执行。

改变 Hook 顺序、组件类型或导出结构时，React 可能重新挂载对应组件并重置它的局部状态。

以下微信配置会影响热更新

Section titled “以下微信配置会影响热更新”

create-vite-taro 模板已经包含以下设置：

projectConfigJson: {
    setting: {
        compileHotReLoad: true,
        urlCheck: false,
        skylineRenderEnable: false
    }
},
projectPrivateConfigJson: {
    setting: {
        urlCheck: false
    }
}

compileHotReLoad: true 开启开发者工具的热重载。补丁文件变化后，开发者工具只重新加载受影响的页面，不重启整个小程序；vpt 依靠这个行为保留 App 和 React 状态。

urlCheck: false 关闭开发者工具的服务器域名校验，让小程序可以连接本机 Vite WebSocket 并报告热更新结果。它只影响开发者工具中的调试连接，不会放宽正式版小程序的服务器域名限制；rebuild 模式不需要该连接。

据微信官方说明，开发者工具的 Skyline 调试模式暂不支持热更新。日常开发时保持 skylineRenderEnable: false；检查 Skyline 效果时再临时开启。参见Skyline 模式。

状态何时会重置

Section titled “状态何时会重置”

以下情况会重新启动应用：

  • 使用 rebuild 模式保存任意有效源码变化；
  • 点击开发者工具的“编译”；
  • 重启 dev:... 或修改 Vite 配置；
  • 补丁模式中的某次代码变化无法安全热更新，vpt 自动执行完整构建。

保存后没有更新

Section titled “保存后没有更新”

依次检查：

  1. 当前目标的 dev:... 仍在运行且终端没有构建错误；
  2. 开发者工具打开的是当前项目对应的 dist/...；
  3. 微信已开启 setting.compileHotReLoad 并关闭 setting.urlCheck；支付宝已开启 developOptions.hotReload；抖音已开启顶层 compileHotReload 和 setting.autoCompile，关闭 setting.urlCheck；
  4. 微信调试时 skylineRenderEnable 未开启。

仍然无效时，关闭开发者工具和开发命令，删除当前目标的 dist/...，重新运行对应的 dev:* 后再打开生成目录。

实现细节参见热更新实现原理。