webpack5+Vue3项目webpack-dev-server跳转路由后HMR不更新页面问题

你对单页应用HMR能力的认知是正确的，路由跳转后热更新理应正常生效，该问题属于可修复的配置/适配问题，常见解决方案如下：

方案1：修正webpack output.publicPath 配置 #

这是该类问题最常见的诱因：当路由跳转后页面路径层级发生变化时，如果output.publicPath配置为相对路径（如./），会导致HMR客户端请求更新资源时路径匹配错误，表面上日志显示加载流程正常，但实际更新的模块没有注入到当前路由对应的组件实例。
在webpack配置中调整output字段即可：

module.exports = {
  // 其余配置保持不变
  output: {
    // 开发环境必须设置为绝对路径，和devServer的assetsPublicPath保持一致
    publicPath: config.dev.assetsPublicPath,
    // 你原有的其他output配置保留即可
  }
}

方案2：补充Vue3入口文件的HMR兼容逻辑 #

如果使用vue-loader处理单文件组件，可在项目入口文件（通常是main.js/main.ts）末尾添加HMR接受逻辑，解决组件实例匹配失效的问题：

// 仅在开发环境生效
if (process.env.NODE_ENV === 'development' && import.meta.webpackHot) {
  import.meta.webpackHot.accept()
}

同时确认Vue Router的路由组件使用标准动态导入语法，不要用自定义的异步组件工厂函数包裹路由组件，避免HMR无法匹配对应组件实例：

// 标准写法，可正常触发HMR
const User = () => import('./views/User.vue')

方案3：调整devServer热更新配置 #

你当前配置的hot: true会在热更新失败时自动回退到整页刷新，部分路由层级变化的场景会触发回退逻辑失效，可以调整为仅启用热模块替换、关闭自动回退刷新：

devServer: {
  // 替换原有hot: true为以下两行
  hot: 'only',
  liveReload: false,
  // 其余原有配置保持不变
}

现象匹配说明 #

你观察到<style>区块修改不受路由影响始终能正常更新，是因为样式热更新走独立的处理链路，不依赖组件实例匹配，完全符合上述问题的触发特征。

内容的提问来源于stack exchange，提问作者orange