久しぶりに自分の別サイトをGoogle検索から見に行ったら404エラーになってた。
理由はGoogleにインデックスされたリンクが / から /index.html にすり替わってたから。

🆗 解決方法

app.vueと同じ階層に /error.vueを作成。onMounted()でリダイレクトを埋め込むとエラーページからリダイレクトできた。

<template>
  <div>
    <AppHeader />
    <div class="error">
      <h2>{{ error.statusCode }}</h2>
      <ul>
        <li>{{ error.message }}</li>
      </ul>
    </div>
    <AppFooter />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "#app";
import { onMounted } from "vue";

const router = useRouter();

onMounted(() => {
  if (window.location.pathname === "/index.html") {
    router.push("/");
  }
});

const error = useError();
</script>

</style>

🆖 解決できなかった方法

gitlabの_redirectsでリダイレクト

これはアドレスバーのURLは変わるが、エラー画面は変わらず。リロードすると正しく画面が表示されるけどエラー画面がでちゃうのでアカンかった。

_redirects

/index.html  /  301

エラー内容

[nuxt] error caught during app initialization Iu: Page not found: /index.html

middlewareでリダイレクト

こんな感じのミドルウェアを追加したけど、エラーが先に発生してこのコードまで辿り着いてなかった。

// middleware/redirectIndex.ts
import { defineNuxtRouteMiddleware, navigateTo } from "#app";

export default defineNuxtRouteMiddleware((to) => {
  if (to.path === "/index.html") {
    return navigateTo("/");
  }
});

nuxt.config.tsの修正

これらも関係なかった。

  ssr: true

  generate: {
    routes: ["/index.html"],
    fallback: "404.html",
    subFolders: false,
  },

  router: {
    middleware: "redirectIndex",
  },

ググると最初に出てくるページのやつ

https://github.com/nuxt/nuxt/issues/21743 (opens new window)
これも not working。

export default defineNuxtPlugin({
  order: -25,
  setup(nuxtApp) {
    delete nuxtApp.payload.path;
  },
});

以上。