Vue3 这种 SPA（Single Page Application 单页面应用），默认是前端路由 + 前端渲染（CSR，Client Side Rendering），搜索引擎爬虫一般只看到一个 index.html，里面没什么内容，SEO（搜索引擎优化）就不太友好。

解决方案主要有三类：

1. SSR（服务端渲染，Server-Side Rendering）

• 使用 Nuxt.js（Vue 官方推荐的 SSR 框架） 或者 Vue3 自带的 SSR 能力。
• 服务端先把 HTML 渲染好（带内容），返回给浏览器，爬虫可以直接抓取完整页面。
• 缺点：增加后端复杂度，需要 Node.js 服务支撑。

场景：新闻门户、电商、需要 SEO 的站点。

2. 预渲染（Prerender）

• 用 prerender-spa-plugin、vite-plugin-prerender 之类的工具，在 构建阶段就把 HTML 渲染出来。
• 每个路由页面生成静态 HTML，打包时写进 dist/。
• 部署后，搜索引擎访问某个 URL 时，能拿到真实 HTML 内容。
• 缺点：对动态数据支持不好（除非做静态快照）。

场景：中小型企业官网、展示类页面（内容不常更新）。

3. 动态渲染（Dynamic Rendering）

• 给用户还是返回 SPA，但检测到是爬虫请求（User-Agent）时，返回预渲染后的 HTML。
• 常见方案：
• Prerender.io 这样的第三方服务。
• 自己用 Puppeteer / Playwright 生成快照。
• 缺点：增加运维复杂度，需做爬虫识别。

场景：已经是 SPA 项目，临时给 SEO 兜底。

4. 补充：SEO 友好优化

即使是 SPA，也可以做一些改进：

• 正确的 <title>、<meta> 动态更新（用 vue-router + vue-meta / @vueuse/head）。
• 结构化数据（JSON-LD） 提供给搜索引擎。
• 站点地图（sitemap.xml）+ robots.txt。
• 避免 hash 路由（/#/xxx），尽量用 history 模式，URL 更友好。

总结：

• 想彻底 SEO 友好 → SSR（Nuxt3）。
• 不想改架构 → Prerender。
• 已上线 SPA，需要兼顾爬虫 → 动态渲染。