今天要做的是一个sitemap,这个东西,接到的任务是,做一个差不多这样的一个东西出来

然后领导告诉我,你的这种文件是不会被扫描到的,你得想办法,让他出现在这里面。接到任务的我,先去了解一下什么是sitemap!

说这么多,什么是Sitemap呢?

        用于生成符合最佳实践的XML网站地图。网站地图有助于搜索引擎更好地索引你的网站,提高网站的SEO性能。Nuxt Sitemap支持单页或多个子页的网站地图,自动处理最后修改时间、图片发现等,同时与Nuxt I18n和Nuxt Content等其他Nuxt模块无缝集成。

        说白了,就是网页进行搜索的时候,sitemap 就是给搜索引擎看的“网站页面清单”,让它们能更快、更全地收录你的网站内容,大概里面就是一个这样的内容。

我写了一会,我跑了一下我的项目!

他显示的是这样的??为什么呢?我的.vue后缀的文件为什么没被显示呢?

我一顿找啊!最终找到答案:

Sitemap 列出的是 URL,而不是 .vue 文件本身

Sitemap 的主要作用是告诉搜索引擎您的网站上有哪些可访问的网页地址 (URLs),而不是直接列出您项目中的源代码文件(如 .vue 文件)。


因为我的.vue文件都是组件挂载在app.vue文件上的,所以并没有被识别,这我就理解了!

但是我现在还是想让我的.vue文件被识别我该怎么做呢!?

经过我的一番调查!我又深入的理解了一下这个东西!

首先sitemap,这个东西会按层查找你的东西

这个en和ch就是我的第一层,能找到的路由!我点击en进去,能找到这么多路由,这都是我的二级路由,这就明白了!

但是我的问题又来了,我看见en路由下面有这么多东西,但是我的ch下面却没有?为什么呢?

我又是一顿查找!!最后发现了问题

export default defineNuxtConfig({
  compatibilityDate: "2025-05-15",
  devtools: { enabled: true },
  modules: ["@nuxtjs/i18n", "@nuxtjs/sitemap"],
  i18n: {
    locales: [
      { code: "en", name: "English", file: "en.json" },
      { code: "ch", name: "简体中文", file: "ch.json" },
    ],
    defaultLocale: "en",
    langDir: "locales/",
    lazy: true,
    strategy: "prefix",
  },
  site: {
    url: 'http://localhost:3000/', 
  },
  sitemap: {
    urls: async () => {
      const storageValues = ['128gb', '256gb', '512gb'];
      const locales = ['en', 'ch']; 
      const dynamicPaths: string[] = [];

      locales.forEach(locale => {
        // 为 pages/[storage].vue 生成带语言前缀的 URL
        // storageValues.forEach(storage => {
          // dynamicPaths.push(`/${locale}/${storage}`);
        // });

        // 为 pages/newPage/[storage].vue 生成带语言前缀的 URL
        storageValues.forEach(storage => {
          dynamicPaths.push(`/${locale}/newPage/${storage}`);
        });
      });
      
      return dynamicPaths;
    }
  },

});

因为在配置文件中,我并没有配置这个东西,所以拿不到en和ch这种一级路由给的东西,我配置之后就可以了!!这样en和ch访问的东西都一样了!!也就做出了我领导要的效果啦~哈哈哈哈哈

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐