如何为基于vike(SSR)的网站添加XML格式站点地图？

下面提供两种在Vike SSR项目中实现XML站点地图的有效方法：

方法一：利用Vike自定义页面渲染逻辑 #

在Vike的路由体系中，直接为sitemap.xml路径创建对应的页面处理文件，通过+onRenderHtml函数返回XML内容及正确的响应头：

1. 在项目的pages目录下创建sitemap.xml子目录，新建+onRenderHtml.js文件：

export async function onRenderHtml() {
  // 可动态生成站点地图内容，比如从数据库或路由配置中获取页面列表
  const sitemapXml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://your-domain.com/</loc>
    <lastmod>${new Date().toISOString()}</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <!-- 添加其他页面的URL节点 -->
</urlset>`;

  return {
    contentType: 'application/xml',
    pageHtml: sitemapXml
  };
}

2. 启动项目后，访问/sitemap.xml即可获取XML格式的站点地图。

注意：如果之前尝试此方法失败，大概率是未正确设置contentType，或者文件路径不符合Vike的路由规则（必须放在pages/sitemap.xml/下）。

方法二：在服务器层面直接添加路由 #

如果你的项目使用自定义Node.js服务器（如Express），可以绕过Vike的渲染流程，直接为sitemap.xml添加独立路由：

以Express为例，修改项目的server.js文件：

import express from 'express';
import { renderPage } from 'vike/server';

const app = express();

// 优先处理站点地图请求
app.get('/sitemap.xml', async (req, res) => {
  // 动态生成站点地图内容
  const sitemapXml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <!-- 站点页面列表 -->
</urlset>`;
  res.setHeader('Content-Type', 'application/xml');
  res.send(sitemapXml);
});

// 处理Vike的其他页面请求
app.get('*', async (req, res) => {
  const pageContextInit = { urlOriginal: req.originalUrl };
  const pageContext = await renderPage(pageContextInit);
  const { httpResponse } = pageContext;
  if (!httpResponse) return;
  const { body, statusCode, headers } = httpResponse;
  res.status(statusCode).set(headers).send(body);
});

app.listen(3000);

这种方法更灵活，适合需要从外部数据源（如CMS、数据库）动态生成站点地图的场景。

内容的提问来源于stack exchange，提问作者melolonth