nuxt3 生成sitemap.xml 动静态站点地图

介绍

Sitemaps协议使网站能够告知搜索引擎网站中可供抓取的网址，以便于搜索引擎google等更方便地抓取网站。

1. 安装依赖 funken-studio/sitemap-nuxt-3

npm i @funken-studio/sitemap-nuxt-3

2. 打开nuxt.config.ts 将依赖添加进去

    modules:
        [
            ['@funken-studio/sitemap-nuxt-3', { generateOnBuild: true }]
        ],

3. 创建static文件夹并在static里创建sitemap.js 内容如下 (这里生成的只是静态路由,动态路由后续写到了再更新)

const sitemap = {
    hostname: 'https://example.com',
    cacheTime: 1,
    routes: async () => {
        //     // 静态路由
        let routes = [
            // 首页
            {
                url: `/`,
                changefred: "daily",
                lastmod: new Date(),
                priority: 1,
            },
            // 产品中心
            {
                url: `/productCenter/center`,
                changefred: "daily",
                lastmod: new Date(),
                priority: 0.9,
            },
        ];
        return routes
    },
    defaults: {
        changefreq: 'daily',
        priority: 1,
        lastmod: new Date().toISOString(),
    },
};
export default sitemap;

4. 在nuxt.config.ts引入并全局使用sitemap.js 配置文件(与modules 同级)

import sitemap from "./static/sitemap";

sitemap: sitemap,

5. 在static文件夹里新建 robots.txt (生成sitemap.xml文件时 需要把线上的地址用#号注释掉)

User-agent: *
Disallow:
#Sitemap: https://www/sitemap.xml (线上地址)
Sitemap: http://192.168.3.55/sitemap.xml (本地地址)

6. 最后 npm run dev 运行一下 sitemap.xm就生成了