Nuxt.jsで静的ファイル生成時にサイトマップも自動生成する方法

Nuxt.jsでサイトマップを自動生成できなかな～と思ったら方法があった。
npm run generateで静的ウェブサイトを生成した際に、一緒に自動生成が可能。

方法

@nuxtjs/sitemapを使用する。
@nuxtjs/sitemap

インストール

npm または yarn でパッケージをインストールする。

$ npm install --save @nuxtjs/sitemap

設定ファイルに@nuxtjs/sitemapを追加

nuxt.config.jsのmodulesオプション内に、@nuxtjs/sitemapを追加

nuxt.config.js

module.exports = {
  modules: [
    ...,
    '@nuxtjs/sitemap'
  ],

  ...
}

使用しているモジュールが一つであれば、

nuxt.config.js

module.exports = {
  modules: ['@nuxtjs/sitemap'],

  ...
}

サイトマップに関する設定

nuxt.config.jsに、sitemapオプションを追加する。
この中にサイトマップに関する設定を書く。

nuxt.config.js

const axios = require('axios')

module.exports = {
  modules: ['@nuxtjs/sitemap'],

  sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://example.com',
    // generate: true,
    exclude: [
      '/admin'
    ],
    routes (callback) {
      axios.get('https://api.example.com/articles')
      .then((res) => {
        var routes = res.data.map((articles) => {
          return '/articles/' + articles.id
        })
        callback(null, routes)
      })
      .catch(callback)
    }
  },

  ...
}

各パラメーターについて

path

生成されるサイトマップファイルの名前。
generateオプションでdirを変更していなければ、distフォルダの中に生成される。

hostname

サイト名。

generate

nuxt generate時に静的なサイトマップファイルを生成するかの設定。
ここをtrueにしておかないとサイトマップファイルが生成されないので注意。

exclude

サイトマップに含めたくないURLを指定できる。
管理者ページなどがある場合に使用する。

routes

サイトマップに含めるURLを追加する。
基本的にはgenerateオプションのroutesと同じように記述すればOK
上のコードはAPIから記事の一覧を取得して、記事毎のURLをroutesに追加する例。

デプロイ

あとはnpm run generateで静的ファイルを生成すると、サイトマップも一緒に生成される。
生成された他のファイルと一緒にサーバーへアップロードすれば完了。

追記

パラメーターgenerateはバージョン1.0.0以降不要となったため、打ち消し線を入れ、サンプルコード内をコメントアウトしました。