Vue.jsで'Invalid Host header'が出た時の対処(webpack 5対応版)

ほとんどの記事は、以下の設定が紹介されています
disableHostCheck: true
非推奨だと思いつつも、お手軽に使っていましたが、webpack5になりオプションがなくなってしまいました。開発環境とはいえ、セキュリティのためとのこと。
仕方なくあちこち探していたところ、こんな設定があるじゃないですか
allowedHosts

以下、サンプルです。

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/hoge/',
  devServer: {
    allowedHosts: ['hogehost','hogehost.foo.local'],
    compress: true,
  },
})

本家のサイトを見ると、auto, all というオプションもある

意外に簡単に実現できることがわかりました。お困りの方がいましたら、ぜひご活用ください。

参考にした情報

---

確認した環境
webpack@5.70.0
webpack-dev-server@4.7.4