Nuxt项目修改页面文件时热重载（hot reload）失效问题求助

1. 清理缓存与校验基础环境 #

• 先删除所有缓存文件和依赖，重新安装：

rm -rf node_modules package-lock.json yarn.lock .nuxt
# 使用pnpm则执行 rm -rf pnpm-lock.yaml
npm install

• 确认Node版本为14.x~16.x LTS版本，Nuxt 2.15.8不兼容17及以上的Node版本，版本不匹配时切换Node版本后再启动项目测试。

2. 修正nuxt.config.js配置 #

• 主动添加文件监听规则，同时针对WSL/Windows环境开启轮询配置：

export default {
  // 原有配置保留，新增以下内容
  watch: [
    './app_panel/pages/**/*.vue',
    './app_panel/components/**/*.vue',
    './app_panel/layouts/**/*.vue'
  ],
  watchers: {
    webpack: {
      // Windows、WSL、Docker共享目录环境下开启轮询
      poll: (process.platform === 'win32' || process.env.WSL_DISTRO_NAME) ? 1000 : false,
      aggregateTimeout: 300
    }
  }
}

• 确认dev环境下没有开启生产模式相关配置，也没有配置错误的ignore规则排除页面目录。

3. 修复依赖兼容问题 #

从提供的package.json来看，存在两个已知会触发热重载异常的依赖问题：

• @nuxtjs/i18n@7.0.2和Nuxt 2.15.8的热重载模块存在兼容问题，建议将该依赖降级到7.0.0或者升级到7.2.0以上版本。
• resolutions中强制锁定的ignore@4.0.6会干扰webpack的文件变更监听逻辑，移除该强制版本规则后重新安装依赖测试。

4. 特殊场景适配 #

• 不要在网络挂载盘、Docker共享目录、WSL跨系统挂载目录中运行项目，这类环境下文件系统变更通知无法正常传递，会导致热重载失效，将项目移到本地原生磁盘运行即可。
• 启动项目后打开浏览器控制台，检查是否有运行时报错，页面代码存在未捕获的报错时会导致热重载补丁无法注入，修复所有报错后热重载会自动恢复。

内容的提问来源于stack exchange，提问作者Mohammad Hossein Gerami