WSL环境Docker部署Nuxt.js应用热重载功能失效问题求助

• 修正 Docker Compose 配置
  你当前仅挂载了src目录，项目根目录下的nuxt.config.js、静态资源等文件修改无法同步到容器，同时需要避免容器内的node_modules被宿主机覆盖，还需要优化轮询参数适配WSL环境，修改后的docker-compose.yml参考如下：

  version: "3"
  services:
    application:
      working_dir: /usr/src/app
      build:
        context: .
      volumes:
        - ./:/usr/src/app/
        - /usr/src/app/node_modules
      image: wetrack-nuxt
      environment:
        - CHOKIDAR_USEPOLLING=true
        - CHOKIDAR_INTERVAL=1000
        - NODE_ENV=development
      ports:
        - 3000:3000
  

  注：原配置中的服务名aplication为拼写错误，修正为application。

• 添加 Nuxt 监听配置
  在项目根目录的nuxt.config.js中添加以下配置，适配容器内的文件监听逻辑：

  export default {
    // 其他原有配置保持不变
    watchers: {
      chokidar: {
        usePolling: true,
        interval: 1000
      },
      webpack: {
        aggregateTimeout: 300,
        poll: 1000
      }
    }
  }
  

• 调整项目存放路径
  必须将整个Nuxt项目存放在WSL的本地文件系统（例如/home/你的用户名/目录下），不要存放在Windows挂载到WSL的/mnt/c、/mnt/d等路径下，这类挂载盘的文件系统事件通知存在原生缺陷，会直接导致热重载失效。

• 可选：显式开启监听参数
  你可以修改package.json中的dev脚本，显式指定监听参数：

  "scripts": {
    "dev": "nuxt --watch",
    // 其他脚本保持不变
  }
  

完成以上修改后，重新构建镜像并启动容器即可恢复热重载功能。

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