Nuxt.jsでgenerateした時に404.htmlを作成する方法

genarate

Nuxt.jsで静的ファイルを書き出す際は以下のコマンドを実行します。

$ npm run generate

これでdistが作られその中に静的ファイルが書き出されます。

$ npm run dev

でサーバーをたてて開発している場合、存在しないURLにアクセスすると404ページが表示されますが、静的ファイルをかき出した時、なにも設定してないと404の考慮はなされません。

nuxt.config.jsの変更

nuxt.config.jsに以下の変更を加えることでgenerate時に404.htmlが書き出されます。

nuxt.confing.js

export default {
  generate: {
    fallback: true
  }
}

サーバ側の設定

Apacheを利用している場合は.htaccess等でリダイレクトの設定をしましょう。

.htaccess

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^.*$ 404.html
</IfModule>