More than 3 years have passed since last update.

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

Last updated at 2020-12-19Posted at 2020-12-19

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

実態ファイルのは無いので、404エラーとなってしまう

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

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

routes.json

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

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