如何基于@angular/router在Angular应用构建时生成sitemap.xml

AI 小北

2026-10-18

Angular构建阶段自动生成sitemap.xml的实现方法

完全可以实现，以下是两种常用实现方案，优先推荐自定义脚本方案，适配你当前的路由结构无需额外依赖：

方案1：自定义Node脚本（推荐）

操作步骤如下：

第一步：导出路由配置
先修改你的app-routing.module.ts文件，将路由数组对外导出，方便脚本读取：

// 原有import内容不变
// 新增export导出路由数组
export const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./pages/common/home/home.module').then( m => m.HomePageModule)
  },
  {
    path: 'contact',
    loadChildren: () => import('./pages/contact/contact.module').then( m => m.ContactPageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
];
// 原有NgModule配置不变

第二步：编写生成脚本
在项目根目录新建generate-sitemap.js文件，内容如下：

const fs = require('fs');
// 替换为你的网站实际域名
const domain = 'https://你的网站域名.com';
// 过滤掉重定向路由，取有效页面路径
const pages = ['home', 'contact'];

let sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
`;

pages.forEach(page => {
  sitemap += `  <url>
  <loc>${domain}/${page}</loc>
  <changefreq>weekly</changefreq>
  <priority>0.8</priority>
</url>
`;
});

sitemap += '</urlset>';

// 路径替换为你的项目实际构建输出目录
fs.writeFileSync('./dist/你的项目名/sitemap.xml', sitemap);
console.log('sitemap.xml 已生成');

第三步：绑定构建钩子
修改package.json中的build命令，将脚本加入构建流程：
```
{
  "scripts": {
    "build": "ng build && node generate-sitemap.js"
  }
}
```
之后每次执行npm run build都会自动生成对应sitemap.xml文件。