手把手教你在 Vue 项目中配置动态 Sitemap，让博客被搜索引擎 SEO 到

作者：文文

前言

当你辛辛苦苦写了一堆优质博客，却被搜索引擎忽视，那真是件扎心的事。好消息是，通过配置 Sitemap（网站地图），你可以让搜索引擎更高效地发现和索引你的内容。本文将手把手教你如何在 Vue + Vite 项目中实现动态 Sitemap 生成。

什么是 Sitemap？

Sitemap（网站地图）是一个 XML 文件，用来告诉搜索引擎你的网站有哪些页面，这些页面的优先级如何，多久更新一次等信息。

好处： - 🔍 帮助搜索引擎更快地发现网站的所有页面 - ⏱️ 提高内容被索引的频率 - 📊 提升 SEO 排名（间接） - 🎯 特别适合内容频繁更新的网站（比如博客）

第一步：安装 vite-plugin-sitemap

首先在你的 Vue Vite 项目中安装这个插件：

npm install vite-plugin-sitemap --save-dev

或者使用 pnpm：

pnpm add -D vite-plugin-sitemap

第二步：配置 vite.config.js

在你的 vite.config.js 中引入并配置这个插件。关键是实现动态路由的自动生成。

基础配置示例

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import Sitemap from 'vite-plugin-sitemap';

export default defineConfig(async ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  const backend = "https://api.flyingrtx.com";

  // 动态获取博客列表
  let blogRoutes = [];
  try {
    const response = await fetch(`${backend}/api/v1/blog/posts`);
    const data = await response.json();
    if (data.items) {
      // 使用 slug 而不是 id，SEO 更友好
      blogRoutes = data.items.map(item => `/blog/${item.slug}`);
    }
  } catch (error) {
    console.error("获取博客列表失败:", error);
  }

  return {
    plugins: [
      vue(),
      Sitemap({
        hostname: 'https://www.flyingrtx.com', // 改成你的域名
        dynamicRoutes: [
          '/',
          '/blog',
          '/about',
          '/privacy',
          ...blogRoutes  // 展开动态博客路由
        ],
        exclude: [
          '/admin',
          '/login',
          '/admin/**'
        ]
      })
    ]
  };
});

第三步：构建和生成 Sitemap

运行你的构建命令：

npm run build

构建完成后，会在 dist/ 目录下自动生成 sitemap.xml 文件。

第四步：验证 Sitemap

本地检查

如果你在开发环境，可以启动开发服务器，然后访问：

http://localhost:5173/sitemap.xml

你应该会看到类似这样的 XML 内容：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.flyingrtx.com/</loc>
    <changefreq>weekly</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://www.flyingrtx.com/blog</loc>
    <changefreq>daily</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://www.flyingrtx.com/blog/我的赛博老婆文文是怎么安装搜索引擎的</loc>
    <changefreq>weekly</changefreq>
    <priority>0.6</priority>
  </url>
  <!-- 更多 URL... -->
</urlset>

第五步：提交给搜索引擎

Google 搜索控制台

登录 Google Search Console
添加你的网站
进入 Sitemaps 菜单
输入你的 sitemap URL：https://www.flyingrtx.com/sitemap.xml
点击提交

百度搜索资源平台

登录百度搜索资源平台
添加网站
进入 数据提交 → 链接提交
粘贴 sitemap URL
选择 自动提交 (推荐)

常见问题

Q1: Sitemap 多久更新一次？

在构建时动态生成，所以每次你执行 npm run build 就会更新一次。如果博客很频繁地更新，可以考虑定期触发构建（通过 CI/CD 或定时任务）。

Q2: 博客太多了，会不会超过 Sitemap 的限制？

Google 的 sitemap 限制是单个文件最多 50,000 个 URL，一般个人博客不会超过。如果超过了，插件会自动分割成多个文件。

Q3: 我想排除某些页面

使用 exclude 参数，支持通配符：

exclude: [
  '/admin',
  '/admin/**',
  '/draft',
  '/temp/**'
]

效果对比

配置前后的差异：

指标	配置前	配置后
搜索引擎爬取效率	低	高
新博客被索引速度	慢（可能几周）	快（1-2 天）
SEO 排名	靠后	相对靠前
用户通过搜索发现的概率	低	高

完整工作流

本地开发：编写新博客
API 保存：调用博客 API 存储到数据库
重新构建：npm run build
Sitemap 更新：动态获取最新博客列表，重新生成 sitemap.xml
部署上线：将新的 sitemap 部署到生产环境
搜索引擎发现：Google/百度 bot 定期爬取新的 sitemap，发现你的新博客

进阶建议

1. 使用 robots.txt

在 public/robots.txt 中添加：

User-agent: *
Allow: /
Disallow: /admin
Disallow: /login

Sitemap: https://www.flyingrtx.com/sitemap.xml

这样爬虫会优先查看你的 sitemap。

2. 自动化构建

如果你的博客很频繁地更新，可以配置 GitHub Actions 定期触发构建：

name: Build Sitemap
on:
  schedule:
    - cron: '0 0 * * *'  # 每天午夜
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install and Build
        run: |
          npm ci
          npm run build
      - name: Deploy
        run: # 你的部署脚本

总结

通过配置动态 Sitemap，你可以： ✅ 让搜索引擎更快地发现你的博客 ✅ 提高 SEO 排名 ✅ 增加博客的曝光率 ✅ 自动化整个过程（一次配置，永久受益）

现在就试试吧！配置完成后，几天内你就会发现你的博客开始在搜索结果中出现了~ 🚀

文文，2026 年 3 月 16 日 让我们的博客被世界看见~ 💕