以下是 Vue 中通过预渲染优化 SEO 的完整方案（基于 2025 年最新技术实践）：
一、预渲染核心原理
```markdown
构建阶段生成静态 HTML
将 Vue 组件渲染为预先生成的 HTML/CSS
对指定路由生成对应的静态页面
比 SSR 更轻量，适合内容变化频率低的项目
```
二、技术选型推荐
```markdown
✅ 主流方案：
1. `@vue/prerender-spa-plugin` (Webpack)
2. `vite-plugin-prerender` (Vite)
3. `vuepress` (文档类项目)
✅ 2025 新增方案：
`unlazy` 智能预渲染（支持动态路由预测）
`hydra-ssg` 混合渲染（SSG + CSR 自动切换）
```
三、实现步骤（以 Vite 为例）
1. 安装依赖
```bash
npm install vite-plugin-prerender @types/prerender-spa-plugin -D
```
2. 配置 vite.config.js
```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createPrerender } from 'vite-plugin-prerender'
export default defineConfig({
plugins: [
vue,
createPrerender({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/about', '/contact'], // 需预渲染的路由
renderer: new Renderer({
inject: {
_PRERENDER: true // 注入渲染标识
},
renderAfterDocumentEvent: 'render-ready' // 自定义渲染触发事件
})
})
})
```
四、关键优化技巧
1. 动态内容处理
```javascript
// 在页面组件中添加预渲染数据获取
export default {
async prerender({ route }) {
return {
props: await fetchData(route.params.id)
```
2. 智能路由检测（2025 新特性）
```javascript
// 自动检测路由配置
const dynamicRoutes = autoDetectRoutes({
exclude: ['/admin/'], // 排除动态路由
maxDepth: 3 // 路由嵌套深度
})
```
3. 混合渲染配置
```javascript
// 对部分页面保持 CSR
const hybridConfig = {
fallback: 'index.html',
routes: {
'/dashboard': { ssr: false },
'/product/': { prerender: true }
```
五、SEO 增强配置
```html
```
```javascript
// 预渲染时动态替换
document.addEventListener('prerender-init', => {
document.title = __PRERENDER__.title
document.querySelector('meta[name="description"]')
setAttribute('content', __PRERENDER__.description)
})
```
六、效果验证方案
```markdown
1. 本地验证：
```bash
npm run build && serve -s dist
curl
```
2. SEO 测试工具：
Google Rich Results Test 2025 版
Lighthouse SEO 评分（需 > 95）
Ahrefs 预渲染覆盖率检测
3. 高级检测：
```javascript
// 在浏览器控制台检测
console.log(window.__PRERENDER_STATUS)
// 应返回 { rendered: true, timestamp: 20250220 }
```
```
七、适用场景对比
| 方案类型 | 适用场景 | TTFB | 维护成本 | SEO 效果 |
|---------|---------|------|---------|---------|
| CSR | 后台系统 | 快 | 低 | 差 |
| SSR | 高动态页 | 中等 | 高 | 优 |
| 预渲染 | 内容型站 | 最快 | 中 | 优 |
八、常见问题解决
```markdown
1. 动态路由失效：
```javascript
routes: ['/posts/1', '/posts/2'] // 显式声明
```
2. 认证页面处理：
```javascript
excludeRoutes: ['/profile', '/dashboard']
```
3. 资源加载异常：
```html
```
4. 增量预渲染（2025 新方案）：
```bash
npm run prerender --incremental --cache
```
```
根据项目需求选择方案，对于内容主导型网站建议采用「预渲染 + CSR 混合模式」，既能保证 SEO 效果，又能维持动态交互能力。
