Prerender.io 配置过程 给你的VUE单页面网站增加一点seo吧~

prerenderio 的使用和配置

作为一个网站，要想给别人搜索到，那么就要依靠搜索引擎的爬虫。那么我们如何让搜索引擎爬虫收录网站的信息呢？那就需要网站确实有信息:

• meta标签的关键词
• meta的描述
• meta的作者等
• 网站body里面也需要有内容

但由于spa的动态性和router的存在，我们每次访问页面都会经过以下过程

• 用户访问* Vue加载实例* router载入解析* 根据routes加载对应组件* 渲染以及ajax获取数据那么问题来了，作为爬虫他是否会等待我们的vue实例加载呢？不会这也就是vuespa页面seo如此差劲的原因:我们根本就无法让爬虫获取到我们的数据，即使获取到了meta数据，由于body里面只有一个空荡荡的div，爬虫也不会收录我们的网站—判断为劣质资源。

所以，SPA的seo就成了一个难题：如何让内容呈现给爬虫呢？

几种方案的优劣对比

根据网络的搜索和参考，我总结出了vue3做seo优化的几种方案

• Nuxt3 SSR服务端渲染（最佳方案）
• Vite SSG 静态页面生成 （适合博客并且将MD文件直接作为路由）
• Prerender.io 动态预渲染 （nginx中间件进行实现）
• Vue-Prerender-plugins 打包静态页面生成 (经查询好像并不支持vue3）
• 后端路由映射 (需要镜像整个前端的路由 不太适合)

目前nuxt的版本正在rfc阶段，但是其文档和相应的开发者以及各种工具的支持都显得极为糟糕，而且将一个spa转换成SSR项目的话，项目规模较小尚可，若是项目的页面较多，以及做了一些dom操作和依赖浏览器进行的判断的话，这些js代码也要进行相应的调整，并不利于开发者进行迁移(说白了—我懒)

而ViteSSG经过了解后，发现这种方案更适合纯展示的博客类项目进行使用，这种方案的原理呢就是：将所有路由直接生成静态页面，然后通过打包构建好相应