Nuxt3 + VS Code开发容器：仅app.vue支持HMR，pages等目录不生效

核心原因 #

开发容器（尤其是Windows下的容器环境）的文件系统事件通知机制和本地环境存在差异，Nuxt默认的HMR监听逻辑无法捕获pages等子目录的文件变更，需要针对性调整配置。

具体解决步骤 #

1. 修改Nuxt配置，强制监听目标目录 #

在项目根目录的nuxt.config.ts中添加或更新监听及HMR相关配置：

export default defineNuxtConfig({
  // 明确指定需要监听的业务目录
  watch: ['pages/**/*', 'components/**/*', 'layouts/**/*'],
  server: {
    hmr: {
      host: '0.0.0.0', // 允许外部连接容器内的HMR服务
      polling: true,   // 启用轮询模式，适配容器文件系统的通知延迟
      protocol: 'ws'
    }
  }
})

2. 调整开发容器的挂载配置 #

在.devcontainer/devcontainer.json中修改挂载参数，优化文件变更同步效率：

{
  "mounts": [
    "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=delegated"
  ]
}

consistency=delegated配置会让容器优先使用本地文件系统的变更通知，大幅降低同步延迟。

3. 修正开发启动命令参数 #

在package.json中更新dev脚本，确保HMR连接正常：

{
  "scripts": {
    "dev": "nuxt dev --host 0.0.0.0 --port 3000"
  }
}

--host 0.0.0.0确保本地能正常连接容器内的HMR websocket服务，避免因连接失败导致更新不触发。

4. 验证容器内文件权限 #

进入容器终端，执行以下命令确认项目目录权限正常：

ls -la /workspace

如果存在权限不足的情况，执行命令调整目录权限：

chmod -R 755 /workspace

内容的提问来源于stack exchange，提问作者Daniel Hüpenbecker