search
LoginSignup
45

More than 3 years have passed since last update.

posted at

updated at

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以降不要となったため、打ち消し線を入れ、サンプルコード内をコメントアウトしました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
45