Nuxt3组件内容变更无热重载，重命名后恢复的问题求助

在Windows系统下使用Nuxt3时，出现热重载异常：组件在layouts/default.vue中引用时无法触发热重载，仅在pages/index.vue中正常；修改文件名大小写后临时生效，重启服务器后问题复现；控制台显示CSS更新但页面无变化。

解决方案 #

1. 统一文件命名大小写 #

Windows文件系统大小写不敏感，但Nuxt/Vite的HMR缓存会严格匹配文件路径大小写：

• 将所有组件、文件夹的命名统一为小写（比如Navigation.vue改为navigation.vue）
• 确保组件引用的标签名与文件名大小写完全一致（如文件为navigation.vue则用<navigation />引用）
• 修改文件名前先停止开发服务器，避免缓存残留。

2. 调整Vite监听配置（适配Windows） #

在nuxt.config.ts中添加Vite监听配置，解决Windows文件系统监听失效问题：

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/strapi'],
  strapi: {
    url: process.env.STRAPI,
  },
  vite: {
    server: {
      watch: {
        usePolling: true, // 启用轮询监听，适配Windows文件系统
      }
    }
  }
})

3. 清理缓存并重建项目 #

停止开发服务器后，执行以下操作：

• 删除项目根目录下的.nuxt、.output文件夹
• 删除node_modules/.vite文件夹
• 重新执行：

  npm install
  nuxt dev
  

4. 升级Nuxt及依赖版本 #

当前使用的Nuxt 3.2.3存在已知HMR兼容性问题，升级到最新稳定版：

npm install nuxt@latest @nuxtjs/tailwindcss@latest @nuxtjs/strapi@latest

5. 禁用开发缓存（临时方案） #

若以上方法无效，可临时禁用开发缓存：

export default defineNuxtConfig({
  // ...其他配置
  nitro: {
    devStorage: false, // 禁用Nitro开发缓存
  }
})

验证 #

完成上述操作后，修改组件内容：

• 查看控制台是否输出[vite] hot updated:相关日志
• 确认页面是否自动刷新并展示最新内容

内容的提问来源于stack exchange，提问作者Dāvis