Nuxt.jsのgenerateコマンドでビルドした静的ファイルをレンタルサーバーにアップしてリロードすると404エラーになる

Nuxt.jsのSPAモードで作成したアプリケーションをXserverにアップした時に上記の問題が発生しました。

開発環境ではリロードしても404エラーにはならなかったので気にもしていなかったのですが、よくよく考えればVue Routerで生成された動的ページはビルドした静的ファイルには存在にしないので404エラーになるのは当たり前でした。

https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/api/configuration-generate/#routes

解決策

今回はXserverにアップしてるので.htaccessにリダイレクトの記述を書くことで動的ルーティングに対応することにしました。

以下のように書くことでindex.htmlを経由して動的ページを表示するようになるため、404エラーが起こらなくなります。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

/ JavaScript Vue.js / コメント数(0)

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。