Nuxt执行generate命令无法生成对应路由HTML文件问题求助

问题根因 #

1. 你配置@nuxtjs/router时将parsePages设为true，Nuxt会同时扫描pages目录下的文件自动生成路由，叠加你自定义的路由就出现了重复路由规则。自动生成的路由会直接用组件名作为路径，所以才会出现/onstep/CosaOnStep这类和你自定义路径不符的错误路由。
2. 自定义路由场景下，Nuxt的generate命令无法自动识别所有需要预渲染的路由路径，同时默认的爬虫逻辑会抓取页面内的错误链接，导致尝试生成不存在的路径报错。
3. 配置中ssr: 'true'为字符串类型，和要求的布尔值类型不符，也可能引发渲染异常。

解决方案 #

1. 修正路由模块配置 #

禁用Nuxt默认的页面路由扫描，仅保留你自定义的路由规则：

// nuxt.config.js 中 buildModules 部分修改为
['@nuxtjs/router', { parsePages: false }],

修改后不会再生成和组件名同名的错误路由，也不会出现重复文件夹的问题。

2. 显式配置预渲染路由列表 #

在nuxt.config.js中新增generate配置项，手动指定所有需要预渲染的路径，同时禁用自动爬取逻辑：

export default {
  // 保留原有其他配置不变，新增下面的generate配置
  generate: {
    crawler: false,
    routes: [
      '/',
      '/onstep',
      '/onstep/cosa-e-onstep',
      '/onstep/configurazioni-possibili-di-onstep',
      '/onstep/moduli-necessari-per-la-scheda',
      '/onstep/scelta-del-driver-per-motori-passo-passo',
      '/onstep/funzionamento-scelta-motori-passo-passo',
      '/onstep/calcolo-step-grado-montatura-eq-o-azm',
      '/onstep/montare-la-scheda',
      '/onstep/prepariamoci-a-scaricare-il-firmware',
      '/onstep/download-configurazione-firmware-onstep',
      '/onstep/configurazione-firmware-wifi',
      '/onstep/download-firmware-onstep'
    ]
  }
}

如果后续文章数量较多，你可以写脚本批量读取内容数据源生成routes列表，无需手动逐条添加。

3. 修正ssr配置类型 #

将ssr配置从字符串改为布尔值：

ssr: true,

4. 清空缓存重新构建 #

执行以下命令清理历史缓存后重新生成静态站点：

rm -rf .nuxt dist
npm run generate --fail-on-error

优化建议 #

你需要的多专栏路由结构无需引入自定义路由模块就能实现，直接使用Nuxt默认的pages目录结构即可：

pages/
├─ index.vue
├─ blog/
│  ├─ index.vue
│  └─ [slug].vue
└─ blog-2/
   ├─ index.vue
   └─ [slug].vue

该结构自动生成的路由完全匹配你需要的/blog/文章slug、/blog-2/文章slug规则，不需要额外维护路由配置，也不会出现静态生成异常，后续可以考虑重构。

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