【Vue.js】Vue CLI 3のホットリロードをWindows+Vagrant環境で動かす

2018/12/09

Vue CLI 2系から3系へバージョンアップした際、HMR（Hot module reload）が動かなくなってましたので対応します。原因ですが、vue-cli2系と同じでVagrantの共有フォルダをマウントしており、ゲストOS上でコマンド実行する場合に発生します（ファイルシステムが異なるため）。

※ Windows上にNode.jsをインストールしており、Windows上でvue-cli-serviceを動かす場合は、デフォルトでホットリロードは有効になります。

環境

ホスト

• Windows 10
• VirtualBox 5.2
• Vagrant 2.1.2

ゲスト

• CentOS 7.4
• Node.js V8.12.0
• Vue CLI 3.1.3
• webpack 4

vue.config.jsにwatchOptionsを追加

vue-cli3では、webpackの各種設定を「vue.config.js」で設定します。
vue-cli3のプロジェクト生成した直後はファイル自体存在しないので、手動でファイルを追加する必要があります。

vue.config.js

module.exports = {
  devServer: {
    host: '192.168.33.10',
    port: '8080',
    watchOptions: {
      poll: true
    }
  }
}

うまく変更を検知できない場合、ポーリング間隔を変更してみましょう。

watchOptions: {
      poll: 1000
    }

※ もし上記でもうまくいかない場合は、Vagrantの共有フォルダのマウント形式を「NFS」に変更してみてください。変更方法は、以下の記事をご参考ください。

補足）vue-cli2 (webpack3)の場合

vue-cli2+webpackの場合は以下のように設定してましたので、vue-cli3(webpack4)mo
その設定を追加しただけになります。
config/index.js (vue-cli2の場合)

module.exports = {
  dev: {
    …
    poll: true,
    …

起動方法

設定を行えば起動時に何かしらのオプションを指定する必要はありません。

$ npm run serve

以上です。