安裝使用步驟參照:此部落格內容轉載部落格地址:https://huangliangbo.com/2097

如何使用?(詳細圖文)

在專案根目錄下使用yarn/npm/cnpm 安裝 @nuxtjs/sitemap

yarn add @nuxtjs/sitemap -D
npm i @nuxtjs/sitemap -D
cnpm i @nuxtjs/sitemap -D

在專案根目錄下找到 nuxt.config.js 往modules新增'@nuxtjs/sitemap'

在專案目錄下新建config資料夾,建立sitemap.js檔案寫入

在nuxt.config.js匯入sitemap.js。並新增 sitemap

項,在瀏覽器輸入專案的sitemap地址即可

解決nuxt生成的sitemap.xml檔案日期格式問題(YYYY-MM-DD)

使用dayjs格式化時間,如果出現格式化時間還是顯示ISO時間格式那麼需要到sitemap原始碼檢視時間是否被轉換了!

找到@nuxtjs/sitemap包, 註釋掉smi.lastmod = (new Date(smiLoose.lastmod)).toISOString();

在node_modules\sitemap\dist\lib\sitemap.js註釋上面的程式碼,因為他會自動把時間轉換成ISO-8601時間格式。 如果沒有找到node_modules\sitemap\dist\lib\sitemap.js

,那就從node_modules\@nuxtjs資料夾裡找.

如何生成多個sitemap.xml檔案?

在 ./config/sitemap.js 中定義的sitemap 使用陣列形式.

const sitemap = [
    {
        path: '/sitemap.xml', // 生成的檔案路徑
        hostname: 'https://baidu.com/', // 網址
        cacheTime: 1000 * 60 * 60 * 24, // 1天 更新頻率，只在 generate: false有用
        gzip: true, // 生成 .xml.gz 壓縮的 sitemap
        generate: false, // 允許使用 nuxt generate 生成
        // 排除不要頁面
        exclude: [
            '/404' //  這裡的路徑相對 hostname
        ],
        // xml預設的配置
        defaults: {
            changefreq: 'always',
            lastmod: new Date()
        },
        // 需要生成的xml資料, return 返回需要給出的xml資料
        routes: () => {
            const routes = [
                {
                    url: "/",  //  這裡的路徑相對 hostname
                    changefreq: "always",
                    lastmod: new Date()
                },
                {
                    url: "/helloword",
                    changefreq: "always",
                    lastmod: "2020-12-04"
                }
            ]
            return routes
        }
    },
    {
        path: '/test/sitemap.xml', // 生成的檔案路徑
        hostname: 'https://baidu.com/', // 網址
        cacheTime: 1000 * 60 * 60 * 24, // 1天 更新頻率，只在 generate: false有用
        gzip: true, // 生成 .xml.gz 壓縮的 sitemap
        generate: false, // 允許使用 nuxt generate 生成
        // 排除不要頁面
        exclude: [
            '/404' //  這裡的路徑相對 hostname
        ],
        // xml預設的配置
        defaults: {
            changefreq: 'always',
            lastmod: new Date()
        },
        // 需要生成的xml資料, return 返回需要給出的xml資料
        routes: () => {
            const routes = [
                {
                    url: "/test",  //  這裡的路徑相對 hostname
                    changefreq: "always",
                    lastmod: new Date()
                },
                {
                    url: "/test/helloword",
                    changefreq: "always",
                    lastmod: "2020-12-04"
                }
            ]
            return routes
        }
    }
]

export default sitemap
 

和後端配合生成更多的url資料拼接url,使用axios請求獲取列表資料等等....

重寫sitemap.js,使用請求獲取url資料

import axios from "axios"
const sitemap = {
    path: '/sitemap.xml', // 生成的檔案路徑
    hostname: 'https://baidu.com/', // 網址
    cacheTime: 1000 * 60 * 60 * 24, // 1天 更新頻率，只在 generate: false有用
    gzip: true, // 生成 .xml.gz 壓縮的 sitemap
    generate: false, // 允許使用 nuxt generate 生成
    // 排除不要頁面
    exclude: [
        '/404' //  這裡的路徑相對 hostname
    ],
    // xml預設的配置
    defaults: {
        changefreq: 'always',
        lastmod: new Date()
    },
    // 需要生成的xml資料, return 返回需要給出的xml資料
    routes: async () => {

        // 從後臺獲取資料,拼接url生成更多的xml資料
        const getUrl = 'https://******'
        const { data } = await axios.get(getUrl)
        const routes = [
            {
                url: "/",  //  這裡的路徑相對 hostname
                changefreq: "always",
                lastmod: new Date()
            },
            {
                url: "/helloword",
                changefreq: "always",
                lastmod: "2020-12-04"
            }
        ]
        if (data && data.list) {
            let arr = data.list.map(item => ({
                url: "/blog/" + item.id,
                lastmod: item.update_time,
                changefreq: "yearly"
            }))
            routes.concat(arr)
        }

        return routes
    }
}

export default sitemap