Vue-cli开发一时爽，却如何面对SEO需求，列举几种常见的模式

很久没有上博客了，最近决定还是重新开始更新。之前公司的项目中有很多SEO的要求，之前对SEO这块了解的也不是很多，后来也看了很多SEO相关的知识。因为公司的web还是传统套模板的开发模式，SEO方面的各种变态要求都可以实现，但有很多小活动页面我都是用Vue去实现的，还好这些活动都不需要SEO，为了以后着想，我还是决定要研究一下。

1.可以满足简单的SEO要求的，prerender-spa-plugin + vue-meta-info组合

插件安装过程就不描述了，主要就是记录一下原理。prerender-spa-plugin这个插件的原理就是通过预渲染页面填充页面完成SEO操作的，说白了打包的时候把正常的页面访问一遍，然后生成静态的放入编译好的html中，再配合vue-meta-info设置每个页面的meta标签，可以做一些简单的SEO操作。

注意使用预渲染vue-router必须使用history模式，用hash模式就不灵了，因为hash的本质就是一个页面。

这种模式只适合少量页面需要SEO操作，且这些页面的数据并不复杂也不需要太多的实时性，但改造起来比较简单，老的项目也可以用。

2.另类方案，利用爬虫程序进行服务器解析，PhantomJS

这个方案可谓是曲线救国，原理就是通过Nginx配置，将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS或者其他爬虫来解析完整的HTML。不知道性能如何，但看到有这么做的，而且对SEO有效果。

这个方案不需要改其他代码，只需要配置一下爬虫程序，改改Nginx配置，就能用在已经前后端分离的项目中，成本小效率高，对前后端都没有影响，只不过性能如何就不知道了，估计更适用于访问量一般的中小型网站上，毕竟堆服务器也是要花很多钱的。

3.服务器端渲染 (SSR)，好用但可能要重起炉灶

普通的Vue是将标签、内容什么的都放入js中，爬虫引擎自然无法抓取，而SSR其实也就是回归传统，服务器来拼接好HTML后在输出给用户，自然而然就可以完全实现SEO的各种变态需求。但这种方法需要服务器的支持，必须使用node.js，还有必须搭建一个SSR的环境，这是及其麻烦的。但有个Nuxt.js还不错，现在类似集成开发框架也很多。

这个的缺点是开发中的项目改造起来会比较困难。

 

4.Node.js中间件，靠谱的解决方案

Vue.js本身就支持服务端渲染（Node.js），改造起来比较简单，Node.js成为一个中间件的存在，代替Vue去完成首屏Ajax请求，服务端还是原来的服务端，只不过渲染部分由Node.js代替了，API接口部分还继续存在，是不错的方案。

目前主流的方案就这几种，以后想到看到更好的方案会继续补充。搜索引擎存在，SEO的需求就会存在，所以在做项目的时候还是要将SEO的需求考虑进去的。另外国外已经有开始做专门的服务端预渲染服务了，当然是要收费的，相信今后国内应该也会有类似的业务，到时候SEO应该会更简单。