构建时预渲染如何帮助SPA的SEO？

构建时预渲染（Prerendering）通过在打包阶段生成静态 HTML 文件，为单页应用（SPA）的 SEO 优化提供了一种轻量级解决方案。其核心机制和优势如下：

一、核心实现原理

1. 无头浏览器渲染

在构建过程中，通过无头浏览器（如 Puppeteer）模拟真实用户访问 SPA 的路由页面，将 JavaScript 动态渲染后的完整 HTML 内容保存为静态文件。

2. 静态文件生成

每个路由对应一个预渲染的静态 HTML 文件（如 `/index.html`、`/about/index.html`），这些文件包含完整的 DOM 结构和初始数据，可直接被搜索引擎爬虫解析。

二、对 SEO 的优化作用

1. 提升内容可读性

预渲染生成的 HTML 包含完整的页面内容（如文本、元数据等），避免了传统 SPA 因依赖 JavaScript 动态加载导致爬虫无法索引的问题。

2. 加速首屏加载

用户首次访问时，直接返回预渲染的静态 HTML，减少 JavaScript 解析和动态渲染的等待时间，间接降低跳出率（对 SEO 排名有正向影响）。

3. 兼容性优化

静态 HTML 无需依赖客户端 JavaScript 执行环境，可兼容低版本爬虫或禁用 JS 的场景。

三、技术实现要点

1. 路由模式

必须使用 `history` 模式（而非 `hash` 模式），确保路由路径与静态文件目录结构匹配。

2. 工具配置

使用 `prerender-spa-plugin` 等插件，结合构建工具（如 Webpack 或 Vite）在打包阶段生成静态文件。

```javascript

// 示例配置（Vue CLI）

const PrerenderSPAPlugin = require('prerender-spa-plugin');

plugins: [

new PrerenderSPAPlugin({

staticDir: path.join(__dirname, 'dist'),

routes: ['/', '/about', '/contact']

})

```

3. 元数据注入

通过 `vue-meta` 等工具动态设置页面标题（`