※この記事はnuxt.js 2.15.8を前提にしています。

タイトルがカオス。意味がわからん。

さくらやロリポップ等の一般的なレンタルサーバに、SSGで出力されたdistをapacheに設置した場合、静的な404エラーを出すとapache側の404エラーとなってしまう。実際にはnuxt側の404エラーを表示したい。

簡単すぎるのか、ググっても目当ての記事が出てこず少しハマっていた、公式に書いてあった（白目）。

公式での記述

注意: 複数のサービス（例えば Netlify）では、404.html を自動的に検出します。ウェブサーバーを独自に設定する場合は、ドキュメントを参照してエラーページの設定方法を確認してください（そして、エラーページを 404.html ファイルに設定してください）

nuxtjs.org

このことからapacheの場合は.htaccessでリダイレクト設定する必要がある、ということみたい。

distフォルダはgenerate時に再作成されてしまうため、staticフォルダに.htaccessファイルを設置すると良い。

nuxt.config.js

export default {
  generate: {
    fallback: true
  }
}

上記コードで、generate時に404.htmlが出力される。
出力されるのはlayouts/error.vueだった。

static/.htaccessの中身も一応。

ErrorDocument 404 /404.html

てっきりnuxtのルーターで処理できるのかと思ったけれど、そうじゃなかった。まァ、実際動かしてみると割りとそれっぽく動作するので一応解決ってことで。