NuxtでSiteMapを生成する方法
Vueを活用する中で、
「Nuxt」
のフレームワークを使用して、
既存で作っていたものを、
試しにリプレイスしようとしている。
そんな中で、
- SiteMap
を生成しようとした時に、
調べたことなどを、
個人用にメモ。
ちなみに、
Nuxtのバージョンについても、
バージョン2系ではなく、
バージョン3系を導入して、
Nuxtを試している。
個人用の備忘録としてメモを残しておく。
Nuxt.jsの公式サイト
Nuxt.jsに関しては、
こちらのサイトを参考にしました。
リンクをメモ。
NuxtのModulesを確認

NuxtのModulesを確認すると、
- simple-sitemap
というモジュールがあるようなので、
こちらを使ってみます。
simple-sitemapを試す
上記の公式サイトにも記載のある、
simple-sitemap
を試します。
コマンド
npm i nuxt-simple-sitemap
こちらで、
モジュールのインストールを実施。
次に設定を行います。
最新情報は、
上記のNPMパッケージのサイトから、
Githubページを見てもらえると良いですね。
実際に試した時のメモ。
修正ファイル
nuxt.config.ts
調整内容
export default defineNuxtConfig({
modules: [
'nuxt-simple-sitemap',
],
runtimeConfig: {
public: {
siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://example.com',
}
},
})
上記の調整を行って、
実際にコンパイル等を行って、
https://example.com/sitemap.xml
を確認してみると、

このような感じで、
sitemapが作成されました。
就職/転職に向けてスキルを高めるために
プログラミングのスキルを高めるために、
以下のサイトを参考にしてみてください。
おすすめ書籍
コメント一覧
コメントはまだありません。
コメントを残す