PublicPath設定を変えてもhistoryApiFallbackをきかせて更新可能にする方法

Vue開発時にドメイン直下のURLにしない場合

Vue.jsを使った開発の話。
npm run serveすると開発サーバーが立ち上がります。
開発サーバーだけど、使っているドメイン直下のURLじゃないところにおいてアクセスしたいときありますよね。

例えば、
https://example.com/
ではなくて
https://example.com/myapp/
にアクセスしたときに表示してほしいみたいな。

自分の場合、グローバル環境にサーバーを一台置いて、リバースプロキシでURLごとに各開発環境に振り分けています。
https://example.com/appAならappAのサーバーを、
https://example.com/appBならappBのサーバーを呼び出してくるみたいな感じです。

ドメイン直下でない場合、PublicPathを設定してやればうまくいきます。
vue.config.jsをつくって以下のように書くだけですね。

vue.config.js

module.exports = {
  publicPath: '/myapp'
}

ただ、こうするとhistoryApiFallbackがきかなくなります。
そもそもhistoryApiFallbackは、VueRouterをhistoryモードで使っているときに更新したり直URLをたたいたりすると、404になったりエラーが出たりしてしまう際に、ちゃんと動かしてくれる機能です。
同じくvue.config.jsで設定してやります。

vue.config.js

module.exports = {
  devServer: {
    historyApiFallback: true
  }
}

PublicPathがデフォルトの時はこれで動きますが、PublicPathを変えると動かなくなります。

historyApiFallbackをPublicPathに合わせて設定する

こんな感じで設定したらうまくいきました。

vue.config.js

module.exports = {
  publicPath: '/myapp',

  devServer: {
    historyApiFallback: {
      index: '/myapp/'
    }
  }
}

※他のもろもろの設定は端折ってます

参考URLはっときますね