はじめに

意気揚々と「初心に戻ってNuxt.js＋Vuetify ルーティングを学び直す」を作成して、レンサバにデモサイトとして設置しようとして問題が起きました。

なんとリンク切れが起きるのです！！

問題は2つありました。

リンク切れの問題　その１

ブラウザに「 https://hirotae.com/nuxt/routing/user 」を入力すると、自動的に末尾に「/(スラッシュ)」が追加されて「 https://hirotae.com/nuxt/routing/user/ 」ます。

この結果、Nuxt.jsで作成したボタンリンクは、相対リンクで作成していますので、図の③のように、https://hirotae.com/nuxt/routing/user/user/159 となってしまいます。

末尾のスラッシュがつかないようにしてみる。

末尾のスラッシュがつかないようにできないか調べてみると、Apacheの設定でDirectorySlashというのがあるようです。

ただ、私が利用しているレンタルサーバでは、.htaccessに記載をしても効果が発揮されませんでしたTT

末尾に強制的にスラッシュがつくようにする

検索をしていくと、Nuxt.jsでURL末尾にスラッシュ(trailing slash)を付ける方法という方法が見つかりました。

Nuxt.jpの公式サイトでも、trailingSlashの記述がありました。

それでは実際に、trailingSlash: trueを設定します。
また、サブディレクトリで動作しますので、base: '/nuxt/routing/'も追記しています。

nuxt.config.js

export default {
  mode: 'spa',
  router: {
    base: '/nuxt/routing/',
    trailingSlash: true
  },
//省略

これで、http://localhost:3000/nuxt/routing/user/ を開くと、以下のように表示されますが、

末尾のスラッシュがない、http://localhost:3000/nuxt/routing/user を開くと404 Not Found になりました。

Nuxt.jsでURL末尾にスラッシュ(trailing slash)を付ける方法の記事で、middlewareで、末尾にスラッシュがない場合は、スラッシュ付きにリダイレクトするように教えていただいています。ありがとうございます。

以下のように、末尾にスラッシュがない場合は、末尾がスラッシュ付きにリダイレクトされて、リンク切れが起きないですね。

yarn buildした成果物をレンサバにおいてみます。
リンク切れなく動作しました。

リンク切れ問題その２

次のリンク切れは、vue-routerの問題になります。

低階層ならよいのですが、深い階層を表示しようとすると404 Not Foundになります。

例えば、https://hirotae.com/nuxt/routing/user/262/friend/356 を直接開こうとした場合は、以下のようになります。

※トップがワードプレスなので、ワードプレスのエラー画面にリダイレクトされてしまいました。

yarn buildで生成された成果物を確認すると、/user/index.htmlまでで、その後の階層の実ファイルはありません。

残りのURLのページは、JSによってブラウザ上で動的に生成しているので、直接URLを参照した場合は、レンタルサーバ上ではファイルがないので404になってしまいます。

vue-routerの公式ドキュメントのHTML5 History モードに記載のサーバ設定例を行っていきます。

だいたいのレンタルサーバは、Apacheで動作していますので、Apacheの.htaccessの設定例を参考にします。

今回は、/nuxt/routing/サブディレクトリにデプロイしますので、以下のように記載します。

.htaccess

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

GitHub Pagesにデプロイする

レンタルサーバではありませんが、GitHub Pagesにもデプロイしたいですね。
一応、公式サイトにGitHub Pages へデプロイするには？があります。

ただ、公式ドキュメントでは、generateモードなので、buildの場合ですと、nuxt.config.jsにrouter.baseの他に、build.publicPathの設定が必要でした。

nuxt.config.js


export default {
  mode: 'spa',
  router: {
    base: '/nuxt-router-test/', <=ここ
    trailingSlash: true,
    middleware: 'trailingSlashRedirect'
  },
// 省略
  build: {
    /*
     ** You can extend webpack config here
     */
    publicPath: '/static/', <= ここ
    extend(config, ctx) {}
  }
}

デフォルトでビルドした場合には、dist/_nuxtというフォルダが作成されます。この_nuxtにアクセスができないために、build.publicPathでフォルダ名をstaticに変更します。

これで表示できるようになりました！

最後に

Nutx.jsを利用する場合は、基本となっているvue-routerのドキュメントも目を通す必要がありますね。

開発環境だけでなく、実際にデプロイした場合の不具合を楽しめました。

今回作成したサンプルは、https://github.com/idani/nuxt-router-test2 で公開をしています。

あと、Nuxt.jsは、generateモードがありますので、そちらは、以下の設定を参考にして準備したいですね。

Nuxt.js(v2)でgenerate納品する前にやっておきたい設定