Nuxt.js 入門 #4 – Nuxt.js と ビルド・エラー処理

Nuxt.js を利用したWebアプリケーション開発の手法を紹介していきます。
第四回目は Nuxt.js を利用したアプリケーションのビルド手法について紹介していきます。

Nuxt.js の 静的吐き出し

npm run dev で表示される画面はWebpack dev serverの 提供する開発用のサーバ環境です。
ファイルの変更に応じて自動的にブラウザをリフレッシュしてくれるなど、開発用に便利な機能が整っています。

レンタルサーバや VPS 等で動作する Apache や nginx などの通常のサーバでVueアプリケーションを配信する場合、
npm run generate コマンドで静的吐き出ししたファイルを用意します。

$ npm run generate

generate コマンドは、 pages フォルダ内の pageコンポーネントを順次静的な HTMLファイルに変換し、
これをdistフォルダに格納していきます。

動的なページのGenerate

例えば、pages/post/_id.vue のような動的なページコンポーネントは、
そのままではGenerateでの静的吐き出し対象となりません。

動的なページコンポーネントを正しくHTMLに吐き出させる場合、 nuxt.config.js で以下のように、
与えられるべきルートパラメータを指定することが出来ます。

module.exports = {
  generate: {
    routes: [
      '/post/1',
      '/post/2',
      '/post/3'
    ]
  }
}

ルートパラメータとして利用する投稿IDなどを API 経由で取得したい場合、
routes に関数を渡すことも可能です。

const api = require('api')

module.exports = {
  generate: {
    routes: function () {
      return api.getPosts().then((res) => {
        return res.data.map((post) => {
          return '/post/' + post.id
        })
      })
    }
  }
}

routes に関数を渡す関数で Promise を返却すると、Promise が解決されるまでページの生成を待機します。

SPAモードとしての出力

ルート毎に 全ての HTML を出力するのではなく、単純に一つの HTML ファイルとして
シンプルな SPA の出力を行う場合には、以下の手順を実施します。

  • nuxt.config.js に mode:'spa' を指定
  • npm run build を実行

これで dist フォルダ内にSPAのアプリケーションファイルが作成されます。

エラーページの作成

静的ファイルの出力を行ってサーバ上で配信する場合、適切なエラーページの管理が必要になります。

例えば 404 のページを作成する場合、 シンプルに pages/404.vue を作成して .htaccess で以下の記述を行います。

ErrorDocument 404 /404/index.html

コレとは別にコード上でJS のエラーが生じた場合のエラー画面は, layout/error.vue を作成して、
これをカスタマイズします。

layout/error.vueでは props で error を受け取る事が出来ます。

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // you can set a custom layout for the error page
}
</script>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です