Nuxt Generate如何绕过loading指示器输出SEO友好静态内容

ssr: false配置下，Nuxt的generate流程默认走纯SPA壳导出逻辑，不会在构建阶段执行任何页面组件的渲染流程，只会把loadingIndicator的代码直接替换掉页面挂载点的位置，最终生成的HTML里没有任何可供搜索引擎抓取的实际DOM内容，自然只会显示加载转圈动画。

1. 修改SSR开关，开启预渲染能力 #

移除原来的ssr: false配置（即使用Nuxt默认的ssr: true行为）。这个配置会让generate流程在构建阶段模拟服务端渲染环境，把每个路由对应的页面组件渲染成静态DOM，直接写入到最终生成的HTML文件的页面挂载点中，从根源上解决无实际内容的问题。
注意：这个修改不会改变你的线上部署方式，generate生成的依然是纯静态文件，不需要额外的Node.js运行环境，和原来的SPA部署流程完全一致。

2. 优化generate配置 #

你原本的generate核心配置不需要大改，仅需补充开启链接自动爬取能力，避免手动维护动态路由列表时出现遗漏：

generate: {
  subFolders: false,
  // 自动爬取页面内的内部链接，预渲染对应路由
  crawlLinks: true,
  routes() {
    // 你原有的动态路由拉取逻辑可以完全保留
  }
}

3. 保留原有的loadingIndicator配置 #

原来的加载屏参数不需要修改，在ssr: true的模式下，Nuxt会自动把加载动画生成为固定定位的全屏遮罩层，不会替换掉页面挂载点的预渲染内容：

• 用户首次打开页面时，会首先看到全屏的浅蓝色背景+白色转圈的加载动画，完全达到你想要的无白屏加载体验优化效果
• 客户端JS加载完成、页面完成水合（hydrate）后，Nuxt会自动移除这个遮罩层，露出下面已经渲染好的真实页面内容
• 搜索引擎爬取页面时，会直接读取挂载点内的实际DOM内容，不受遮罩层的影响，完全满足SEO友好的要求

• 如果生成的HTML依然没有实际内容，检查是否残留了ssr: false的配置，这是导致预渲染失效的核心原因
• 如果预渲染的页面内容存在空白、undefined占位的情况，检查页面组件中是否有直接访问浏览器对象（window、document等）的代码，这类代码需要放到mounted或者beforeMount钩子中执行，避免Node.js构建环境报错导致预渲染失败
• 如果页面加载完成后转圈动画一直不消失，检查浏览器控制台的JS报错，一般是客户端水合阶段出错导致遮罩层没有被正常移除，修复对应JS错误即可

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