1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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が動作するようになりました:tada:

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?