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