Azure Static Web Apps : Vue.js history mode の 404対策

Azure Static Web Apps にデプロイされたVue.jsコンテンツで
ページ遷移した際に、リロードすると404エラーになってしまう。
その対策について。

解決方法

Azure Static Web Apps のroutes設定によるリダイレクトで解決する。
(netlify だと _redirects ファイルによる設定）

public ディレクトリ直下に、routes.json を作成。
すべてのルートで/index.html が返されるように以下のよう記述

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

この設定によって、ページのURLはそのままに
常に、index.html が返されるようになります。

関連URL

Azure Static Web Apps プレビューでのルート

[linkcard url=”https://docs.microsoft.com/ja-jp/azure/static-web-apps/routes”]