Nuxt 2 路由优化与 Sitemap 生成方案

1. 路由优化策略

问题背景

现有工程的路由由 nuxt-i18n 管理，原生的 pages/ 目录结构会生成冗余路由，导致应用包体积增大。

解决方案

使用 .nuxtignore 文件排除原生路由生成

创建 .nuxtignore 文件：

复制代码

pages/

实施效果

成功减少 400+ 条冗余路由
显著优化了 app.js 文件大小
保持现有 i18n 路由功能完整

替代路由实现方式

对于必要的页面路由，采用以下方案替代：

使用 alias 配置别名路由
通过 redirect 方法处理重定向逻辑
依赖 nuxt-i18n 进行多语言路由管理

2. Sitemap 生成配置

版本兼容性

安装适用于 Nuxt 2 的版本：

bash 复制代码

npm install @nuxtjs/sitemap@^2.4.0

模块配置

在 nuxt.config.js 中正确配置模块加载顺序：

javascript 复制代码

modules: [
  'nuxt-i18n',      // i18n 必须在前
  '@nuxtjs/sitemap' // sitemap 在后
],

sitemap: {
  hostname: process.env.BASE_URL || 'https://yourdomain.com',
  gzip: true,
  
  // 路由过滤与别名处理
  filter({ routes }) {
    return routes.reduce((pre, cur) => {
      const alias = Array.isArray(cur.alias)
        ? cur.alias.map(item => ({ 
            url: item, 
            path: item,
            changefreq: 'weekly',
            priority: 0.7
          }))
        : cur.alias
        ? [{ 
            url: cur.alias, 
            path: cur.alias,
            changefreq: 'weekly', 
            priority: 0.7 
          }]
        : [];
      
      return pre.concat([cur].concat(alias));
    }, []);
  },
  
  // 默认配置
  defaults: {
    changefreq: 'weekly',
    priority: 0.8,
    lastmod: new Date()
  }
}

核心功能说明

filter 方法作用：

接收 Nuxt 生成的路由数组
自动提取每个路由的别名配置
将别名转换为独立的 sitemap 条目
确保主路由和别名路由都被收录

访问方式 ：部署后可通过 /sitemap.xml 访问生成的站点地图文件。

3. 方案优势

性能优化

路由数量减少 60%+
应用包体积显著减小
构建速度提升

功能完整性

保持完整的 i18n 多语言支持
自动收录所有有效路由及别名
符合搜索引擎优化标准

维护便利性

配置集中管理
自动化的路由处理逻辑
易于后续扩展和维护

该方案成功解决了路由冗余问题，同时确保了站点地图的完整性和准确性。