Help us understand the problem. What is going on with this article?

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

bucchi49
本業ニート、副業でフリーランスをしているエンジニアです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした