升级NodeJS、Vue CLI及Webpack后webpack-dev-server热重载失效

核心场景 #

升级Node.js到20版本，同步把vue/cli-service从4升到5、Webpack从4升到5、webpack-dev-server到v4后，用vue-cli-service serve启动开发服务，端口8888能正常启动且无报错，但修改.vue文件后控制台显示编译成功，页面却看不到更新内容——升级前这个功能是正常的。

排查修复步骤 #

1. 检查webpack-dev-server热更新配置
   webpack-dev-server v4对热更新逻辑做了调整，务必在vue.config.js里显式开启热更新，避免默认配置冲突：

module.exports = {
  devServer: {
    hot: true, // v4必须显式开启，旧版本可能默认开启
    liveReload: false, // 开启hot时关掉liveReload，防止两者冲突
    client: {
      webSocketTransport: 'ws' // 强制用ws协议，避免轮询导致更新不及时
    }
  }
}

2. 确认Vue热更新插件配置
   vue-cli-service 5依赖@vue/webpack-plugin实现热更新，要是你有自定义webpack配置，确保没禁用这个插件：

// vue.config.js中无需手动添加，但自定义配置时要保留
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  configureWebpack: {
    plugins: [new VueLoaderPlugin()]
  }
}

3. 适配Node.js 20的文件监听机制
   Node.js 20的文件系统监听有变化，要是修改文件没触发编译，试试开启轮询模式：

module.exports = {
  devServer: {
    watchFiles: {
      paths: ['src/**/*'],
      options: {
        usePolling: true,
        interval: 1000 // 每秒轮询一次，可按需调整
      }
    }
  }
}

4. 清理缓存并重装依赖

• 删除node_modules、package-lock.json（或yarn.lock）
• 重新执行npm install/yarn install
• 启动服务时加--no-cache参数：vue-cli-service serve --no-cache

5. 排查自定义webpack配置冲突
   对比迁移前后的webpack.config.js，确认：

• 没有禁用HotModuleReplacementPlugin
• 开发环境下output.publicPath用相对路径'/'，别设成绝对路径
• 没有错误配置devServer.static导致资源路径异常

验证方式 #

改完配置重启服务后，修改.vue文件：

• 看控制台有没有[HMR] Updated modules:的日志
• 打开浏览器控制台，检查是否有[webpack-dev-server] Connected的WebSocket连接日志

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