1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

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

なぜ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 が返されるようになります。

関連URL

Azure Static Web Apps プレビューでのルート
https://docs.microsoft.com/ja-jp/azure/static-web-apps/routes

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?