Vite热更新仅对App.vue生效，组件文件无响应问题求助

• 检查组件导入路径大小写
  Vite对文件路径大小写敏感，哪怕系统默认不区分，热重载也依赖精确匹配。比如你写import HelloWorld from './components/helloworld.vue'但实际文件是HelloWorld.vue，就会导致组件修改不触发更新。直接把导入路径的大小写改成和实际文件名完全一致就行，建议统一组件命名风格（比如大驼峰），避免这类问题。

• 排查Vite的server.watch配置
  打开vite.config.js/vite.config.ts，看看有没有自定义的server.watch配置。如果设置了ignored数组，别把components目录加进去，要是不小心加了，就用!**/components/**强制包含：

  export default defineConfig({
    server: {
      watch: {
        ignored: ['!**/components/**']
      }
    }
  })
  

• 调整VSCode的自动保存设置
  有些VSCode自动保存插件或者内置的自动保存功能，会以Vite识别不了的方式修改文件，导致热重载没反应。先关掉自动保存（点顶部菜单「文件」→「自动保存」取消勾选），手动按Ctrl+S保存组件文件，看看能不能触发热更新。要是好了，就排查下是不是第三方自动保存插件搞的鬼，暂时禁用试试。

• 清理Vite缓存重启服务
  Vite的缓存可能抽风，导致文件变更检测失效。步骤很简单：

  1. 停掉npm run dev
  2. 删除项目根目录下的node_modules/.vite文件夹
  3. 重新跑npm run dev

• 检查文件系统权限
  要是用的Linux或macOS，components文件夹权限不够的话，Vite可能监听不了文件变化。执行chmod -R 755 src/components/修复权限，再重启开发服务试试。

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