Vue.js で dev server が https モードのときにホットリロードが動かないのをなんとかしたい

1608 ワード
Vue.js webpack Vue.js テキストリンク

Vue.js の開発サーバーには、開発中のコードの更新に合わせて自動的にページが更新される、HMR (Hot Module Replacement) という機能がついてます。
（正確には webpack の機能）
いちいちブラウザをリロードしないでも変更が反映されていくので非常に便利なんですが、開発サーバーを https モードで動かしてる場合、つまり

yarn serve --https

で起動したり、vue.config.js で、

vue.config.js
module.exports = {
  // ...
  devServer: {
    https: true
  }
}

みたいにしてた場合、なぜかこのHMRが機能しないことがあるようです。

なんとかする方法

devServer の設定項目に、以下を追記します

vue.config.js
module.exports = {
  // ...
  devServer: {
    https: true,
+   host: 'localhost',
+   port: 8080
  }
}

これで HTTPS モードでもHMRが動作するようになりました