克服 SPA 的局限性

像 Vue.js 这样的单页面应用 (SPA) 提供了极佳的速度和用户体验。流畅的过渡和快速的状态管理让开发变得轻松。

如果你的业务依赖于自然搜索流量，你就会面临一个问题。搜索引擎爬虫在访问 SPA 时，通常只能看到一个空的 HTML 外壳。Google 处理 JavaScript 的速度较慢，而其他搜索引擎甚至难以索引你的内容。

我们使用 Vue 3 构建了 Global Full-Stack Developer (GFD)。我们需要 SEO 能力，但又不想将整个代码库迁移到像 Nuxt 这样的服务端渲染 (SSR) 框架中。

我们选择了构建时预渲染 (build-time prerendering)。

预渲染会在构建过程中将特定的路由转换为静态 HTML 文件。当爬虫访问你的网站时，它接收到的是完整的 HTML 文档，而不是一个空的 div。

在我们的 Vite 配置中，我们使用了 vite-plugin-prerender。

请按照以下步骤进行实现：

  1. 将插件安装为开发依赖： npm install vite-plugin-prerender -D

  2. 配置你的 vite.config.js 以列出你的路由。

  3. 运行你的构建命令。

这种方法让你在无需承担完整 SSR 复杂性的情况下，获得 SEO 方面的优势。

来源：https://dev.to/ariyoz/overcoming-the-spa-limitation-how-we-solved-seo-for-our-vue-3-web-app-5cjd