Vue CLI 3 + DockerでHMRが動かない時の解決策

Vue CLI 3便利ですね。GUIでプラグインの追加やタスクの実行などを行えて見た目もカッコいいですし、使っていて楽しいです。

しかし、Docker上で動かしてみたときに、初めのビルドはうまくいくがHMRがうまく動かないことがありました。ファイルを変更しても自動でビルドが走りません。

そんな時の解決策です。

解決策

Vue CLI 3の設定ファイルのvue.config.jsがなければ作成、すでにある場合は編集します。

module.exports = {
  devServer: {
    watchOptions: {
      poll: 3000
    }
  }
}

このように、ファイル変更チェックの間隔(秒)を設定します。

おそらく、Docker上で普通のwebpackプロジェクトやAngular CLIなどで動かしてる人などではあるあるだと思いますが、Vue CLI 3をDockerで動かしたい人のために残しておきます。