VueのビルトインサーバーをDockerコンテナ内で動かしているときにホットリロードが利かない問題

環境

Nodeコンテナ：16.16.0-bullseye
npm 8.15.1
@vue/cli 5.0.8

前提

npm run devでサーバーが立ったとか、サーバー再起動すればソース更新分は反映されるとかそういう状態。

対処

プロジェクトフォルダのてっぺんにあるvue.config.jsに、以下を追記する。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  // 以下を追記

  configureWebpack: {
    watchOptions: {
      aggregateTimeout: 300,
      ignored: /node_modules/,
      poll: 1000
    }
  }

  // ここまで

})

参考

If watching does not work for you, try out this option. This may help issues with NFS and machines in VirtualBox, WSL, Containers, or Docker. In those cases, use a polling interval and ignore large folders like /node_modules/ to keep CPU usage minimal.
Watch and WatchOptions | webpack

ファイル変更の監視がうまく働かない場合はポーリングを試してみろ。これはDockerで使われるようなNFS（ネットワークファイルシステム）で動いている場合にうまくいくかもよ。その場合、ignoredを入れると、そこは監視しないからCPU使用率が下がるぞ

って書いてある。