谈谈vue的ssr的几种方案，解决seo难题

由于我们的vue是一个SPA单页应用有且只有一个html页面且是虚拟dom，不利于搜索引擎的蜘蛛进行网页爬取，当然也是有解决方案的以下列举六种解决方案仅供学习参考
1.SSR服务器渲染
2.SSG静态渲染
3.nuxt
4.Quasar
5.预渲染prerender-spa-plugin
6.Phantomjs

一、SSR服务器渲染

1.采用vue官网的ssr方案
这种方案建议在开发之就要确定好是否选用，否则一个成型的vue项目要改成这种方案还是很难受的在我们的vue3里面对ssr支持已经非常的友好了
具体实现方案可以参考官网 https://vuejs.org/guide/scaling-up/ssr.html#writing-ssr-friendly-code
优点：很棒的ssr，搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
缺点：要硬说缺点的话，需要开发之前就要敲定方案否则后期修改代码会吐血，再者需要服务器对nodejs环境的支持
适用场景：如果构建大型网站，类似马蜂窝淘宝京东各大型且需要seo

二、SSG静态渲染

这个方案在官网也有介绍 https://vuejs.org/guide/scaling-up/ssr.html#ssr-vs-ssg
比如VitePress 它是一个 Vue 驱动的静态网站生成器
优点：编译打包时, 就会帮你处理, 纯静态文件，访问速度超快；对比SSR，不涉及到服务器负载方面问题；静态网页不宜遭到黑客攻击，安全性更高。
缺点：参数多的时候
适用场景：正常普通量级官网, 博客网站等

三、Nuxt

Nuxt是建立在 Vue 生态系统之上的更高级别的框架，它为编写通用 Vue 应用程序提供了流线型的开发体验。更好的是，您还可以将其用作静态站点生成器！在vue官网作者也是很强烈的建议尝试
Nuxt是支持ssr和SSG的
Nuxt3官网链接：https://v3.nuxtjs.org/
Nuxt2官网链接：https://www.nuxtjs.cn/
适用场景：都适用毕竟框架的出现就是解决这种事情的但是需要去了解下本框架的坑点和一些api

四、Quasar

Quasar是一个完整的基于 Vue 的解决方案，它允许您使用一个代码库来定位 SPA、SSR、PWA、移动应用程序、桌面应用程序和浏览器扩展。它不仅处理构建设置，还提供符合 Material Design 的 UI 组件的完整集合。
详见官网：https://quasar.dev/
适用场景：都适用毕竟框架的出现就是解决这种事情的但是需要去了解下本框架的坑点和一些api

三、预渲染prerender-spa-plugin

这个插件是模拟浏览器访问站点，将站点的内容以静态文件的方式保存。
如果你只是对少数页面需要做SEO处理（例如 / 首页, /about 关于等页面）

预渲染是一个非常好的方式, 预渲染会在构建时, 简单的针对特定路由, 生成静态 HTML 文件 (打包时可以帮你解析静态化)

优点: 设置预渲染简单, 对代码的改动小

缺点: 只适合于做少数页面进行SEO的情况, 如果页面几百上千, 就不推荐了 (会打包很慢)
适用场景：正常普通量级官网, 博客网站等

四、Phantomjs

Phantomjs是一个基于webkit内核的无头浏览器，没有UI界面，就是一个浏览器，其内的点击、翻页等人为相关操作需要程序设计实现
这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫
这个不多说我也没用过