使用Nuxt.js进行Vue项目SEO和sitemap优化

在 Nuxt 中生成 Sitemap 非常简单,因为它拥有强大的模块生态。我们不需要手动写爬虫,直接用官方推荐的模块即可。 第一步:安装 Sitemap 模块 目前 Nuxt 3 最主流的方案是使用 @nuxtjs/sitemap。 Bash npx nuxi@latest module add sitemap 第二…

使用Nuxt.js进行Vue项目SEO和sitemap优化

在 Nuxt 中生成 Sitemap 非常简单,因为它拥有强大的模块生态。我们不需要手动写爬虫,直接用官方推荐的模块即可。

第一步:安装 Sitemap 模块 目前 Nuxt 3 最主流的方案是使用 @nuxtjs/sitemap。

npx nuxi@latest module add sitemap

或者:

npm install @nuxtjs/sitemap -D

第二步:在 nuxt.config.ts 中配置 安装完成后,你只需要在配置文件中声明你的站点域名。Nuxt 会自动扫描你的 pages/ 目录并生成对应的路由。

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],

  site: {
    url: 'https://www.yourdomain.com',
  },

  sitemap: {
    // 【隐藏页面】在这里填入你不希望爬虫看到的路径
    exclude: [
      '/admin/**',      // 隐藏整个管理后台目录
      '/secret-page',   // 隐藏具体某个页面
      '/temp/test-*'    // 支持通配符,隐藏 temp 目录下所有 test 开头的文件
    ],

    // 【自动检查】是否自动扫描 pages 目录(默认为 true)
    inferStaticPages: true,
  }
})

第三步:查看结果 开发模式: 启动项目后,直接访问 localhost:3000/sitemap.xml 就能看到实时生成的 XML。

打包模式: 运行 npm run generate (静态) 或 npm run build (服务器),Nuxt 会在输出目录自动生成物理文件。

相关文章

技术 · 2026-03-16前端性能优化的 10 个黄金法则:从加载到交互的完整优化方案技术 · 2026-03-16手把手教你在 Vue 项目中配置动态 Sitemap,让博客被搜索引擎 SEO 到技术 · 2026-02-27一套提示词实现 Screen-to-Code 到 uni-app Vue3 的完美转化