Vue.js热重载无法检测文件变更问题求助

• 检查系统文件监听上限
  Linux/macOS系统对文件监听数量有默认限制，项目文件过多时可能触发限制导致热重载失效。先查看当前限制：

  # macOS用户执行
  launchctl limit maxfiles
  # Linux用户执行
  ulimit -n
  

  如果数值低于65536，临时调高：

  # macOS
  sudo launchctl limit maxfiles 65536 200000
  # Linux
  ulimit -n 65536
  

• 修改vue.config.js强制启用热重载
  在现有配置基础上添加devServer相关参数，明确指定监听文件范围并启用热更新：

  module.exports = {
    transpileDependencies: ['vuetify'],
    devServer: {
      hot: true,
      liveReload: true,
      watchFiles: ['src/**/*', 'public/**/*']
    }
  }
  

  保存配置后重启npm run serve（注：正确命令是npm run serve，你之前的npm serve大概率是笔误）

• 清除项目缓存
  删掉node_modules下的缓存目录，再重启服务：

  rm -rf node_modules/.cache
  npm run serve
  

• 检查编辑器保存设置
  确保编辑器设置为保存时立即写入文件系统，比如VS Code的autoSave设为onFocusChange或短延迟的afterDelay，避免编辑器只在后台缓存修改而不触发文件系统变更。

• 排查依赖版本冲突
  检查package.json中@vue/cli-service、vue-loader等依赖的版本，若版本差异过大，尝试更新到稳定兼容版本：

  npm update @vue/cli-service vue-loader
  

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