SEO 百科

Vue

本页目录

Vue

Vue 是一套用来搭建网页界面的 JavaScript 框架，它把页面拆成组件，再把数据和界面绑定起来[1]。做网站的人会遇上它，因为大量中文站点和后台系统用它开发，而它默认在浏览器里生成内容，对搜索引擎的抓取并不友好。要不要选它，取决于能不能补上服务端渲染或预渲染这一步。

框架定位与生态

Vue 官方给自己的定位，是一套构建用户界面的 JavaScript 框架，它建立在标准 HTML、CSS 和 JavaScript 之上[1]。它提供基于组件的编程模型，页面里每块界面写成一个组件，组件之间可以互相嵌套。

在大多数带构建工具的 Vue 项目里，组件写成单文件组件，文件后缀是 .vue，逻辑、模板和样式放在同一个文件里[1]。

Vue 被称为渐进式框架，因为它可以按需要一点点接入。既有只给静态 HTML 加一点交互的用法，也有做成完整单页应用的用法[1]。这套弹性让它在中文社区铺得很开，文档站、后台系统和企业官网里都能见到它。

配套生态里常一起出现的有：路由用 Vue Router，状态管理用 Pinia，构建工具用 Vite，做内容站用 VitePress。

默认渲染方式

Vue 默认在浏览器里渲染，这种方式叫客户端渲染。服务器返回的 HTML 只有骨架，没有正文。

骨架里留一个挂载点，形如 <div id="app"></div>。组件渲染出来的内容，才填进这个 div。Vue 官方说明，Vue 是一套构建客户端应用的框架，组件默认在浏览器里生成和操作 DOM[2]。

于是页面内容分成两步：浏览器先下载 JavaScript 文件，执行之后再把内容画出来。用户看到页面的时间，取决于这一步快不快；抓取工具看到内容的时间，也取决于同一件事。

客户端渲染对抓取的影响

搜索引擎拿到一个网址，先请求一次，再渲染一次。Google 把处理 JavaScript 网页分成三个阶段：抓取、呈现、编入索引[3]。

对客户端渲染的页面，第一次请求回来的 HTML 里没有正文。Google 要把这一页放进渲染队列，等资源允许时用无头浏览器跑一遍脚本，之后才能读到内容[3]。无头浏览器指的是没有图形界面的浏览器，由程序驱动。官方对排队时间没有承诺，只说可能几秒，也可能更长[3]。

不光 Google 一家。有的抓取工具不执行脚本，拿到的是没有正文的 HTML。这类工具里有别的搜索引擎，也有相当一部分 AI 爬虫和社交平台预览程序。对它们来说，脚本生成的内容等于不存在。

服务端渲染与静态生成

要补上这一步，就得让服务器先把 HTML 生成好。

Vue 官方提供了服务端渲染的接口。组件可以在服务器上渲染成 HTML 字符串，直接发给浏览器，再由浏览器接管交互，这一步在 Vue 里叫客户端激活[2]。官方把好处写得很直接：“搜索引擎爬虫会直接看到渲染完整的页面”[2]。最小用法是这样：

import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'

const app = createSSRApp({ template: '<h1>标题</h1>' })
const html = await renderToString(app)

官方同时提醒，从示例走到能上线的服务端渲染，还要处理路由、数据拉取和状态管理，完整实现相当复杂，因此建议直接使用 Vue 的框架[2]。做这件事的框架是 Nuxt，它默认开启服务端渲染。

内容不常变的时候，还可以用预渲染。页面在构建阶段就生成静态 HTML，服务器只负责把文件发出去，省掉每次请求现算的开销。VitePress 就是这一类工具，它本身就是用 Vue 搭建的文档站生成器。

使用的代价

用 Vue 做站，有几样成本要算进去。

  • 构建链更长。项目要跑在 Node.js 环境里，经过打包才出成品，部署方式比上传静态文件复杂。
  • 首屏依赖脚本。客户端渲染的页面，内容要等 JavaScript 下载执行之后才出现，网络慢或设备旧时等待更明显。
  • 出错时页面空白。脚本一旦报错或被拦截，挂载点就是空的，用户和抓取工具都看不到东西。
  • 服务端渲染要养一个进程。按请求现算页面比直接发文件更耗处理器，流量上来之后要配缓存和扩容。

常见误用

一个误用是以为换了框架，收录自然就好。收录取决于抓取工具能不能读到内容，框架只是其中一个变量。

另一个误用是把标题、描述和规范网址全交给脚本生成。这些元素最好写在服务器返回的 HTML 里，Google 也建议规范网址优先用 HTML 指定[3]。

还有一种是把路由写成井号形式。地址里带 #，形如 <a href="#/products">，Googlebot 无法可靠解析[3]。改用 History API 之后，网址才是一个个可抓取的路径。

附录

参见

参考资料

官方（境外）

  1. 《Introduction》，Vue.js 官方文档。
  2. 《Server-Side Rendering (SSR)》，Vue.js 官方文档。
  3. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-04 更新。

外部链接

无。