前言

目前 Vue单页面应用在前端界混的风生水起，它的开发思想使得我们能真正做到前后端分离、解耦。单页面应用使用浏览器动态解析JS，呈现出最终的页面，用户体验比较好，网站性能也提高不少。但网络爬虫并不会动态解析Js，所以访问所有未处理的单页面应用URL得到的只会是项目入口（index.html）文件中的代码，不能得到具体的内容，对Seo的优化极其的不友好。为了优化项目Seo，目前主要有两个方案：服务端渲染(Server Side Rendering)、预渲染(Prerending)。

本文主要介绍预渲染方案中运用prerender服务方式解决Vue单页面Seo问题

预渲染的两种方式

prerender-spa-plugin：

这个插件是一个webpack插件，此方式会在项目构建（npm run build）时将项目按路由打包成相对应的html静态文件。因此，仅有如下项目类型适用。
- 路由是静态的，且非海量路由
- 页面内容不需要使用ajax获取并展示内容
prerender：此服务在页面渲染的时，将会直接取代网站后端对爬虫请求进行响应，将提前渲染后静态页面直接返回给爬虫，因为此服务作用在页面渲染时，所以不再受方式1那些路由限制。

prerender 的使用

1、安装

npm install prerender

2、启动服务 server.js

const prerender = require('prerender');
const server = prerender();
server.start();

3、测试

http://localhost:3000/render?url=https://www.example.com/

此时，你已经启动了一个prerender服务，并返回了https://www.example.com/的内容，此时页面上所看到的https://www.example.com/内容是通过prerender服务提前渲染成静态页面后返回的。服务默认运行在3000端口，可以参考prerender文档进行默认修改。

prerender中间件的使用

我们所理想的渲染模式是：当普通用户访问时不需要通过prerender服务提前渲染，而通过js动态渲染；当爬虫访问页面时，通过prerender服务提前将页面渲染为静态页面供爬虫爬取。

那么如何能实现上面的需求呢？

不过还好，对于这样的需求prerender提供了对应的中间件：prerender-node (Express)、prerender_rails(Rails) 、.htaccess(Apache)、nginx.conf等，可参考prerender文档中Middleware模块文档进行了解，笔者使用的是prerender-node (Express)node中间件。具体的配置修改如下：

1、安装

在Express下安装

npm install prerender-node --save

2、修改app.js配置

var prerender = require('prerender-node')
app.use(
  prerender
    //爬虫访问转发到prerender服务进行预渲染
    .set("prerenderServiceUrl", "http://localhost:3000/")
    //普通用户访问直接访问项目地址不进行预渲染
    .set("host", "wwww.xxxx.com")
);