前言

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

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

预渲染的两种方式

这个插件是一个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服务提前将页面渲染为静态页面供爬虫爬取。

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

复制代码

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")

);

复制代码

3、重启Express服务

注意事项：

第2步修改配置代码要置于Express路由分发之前；即下列代码之前app.use("/", indexRouter);

app.use("/users", usersRouter);

复制代码

修改app.js配置时候项目地址www.xxxx.com不要带http://

测试

安装好prerender服务以及prerender中间件后prerender预渲染算是大功告成了，下面介绍测试方法。

测试原理： 添加谷歌浏览器Emulated devices模拟爬虫访问，具体实现如下：

1.打开谷歌浏览器开发者工具。

2.点击(进入手机编辑模式)按钮，如图

3.点击选择模拟设备下拉选择，选择最后一个Edit...,将进入如下图。

4.点击Add custom device 按钮

5其中User agent string 填写:

Mozilla/5.0 (compatible; Baiduspider/2.0;+http://www.baidu.com/search/spider.html)其他如图，

6.点击保存。

7.点击选择模拟设备下拉选择，选择新添加的模拟百度爬虫

经过以上7步，你浏览器能模拟爬虫访问，此时打开浏览器控制台network筛选doc类型，刷新页面，能看到页面返回是经过编译后的静态文件。

选择其他非爬虫模式Emulated devices或不打开Emulated device调试模式，刷新页面，能看到页面返回是通过js动态解析的。

总结

配置prerender总体思路：通过prerender中间件判断是否是爬虫访问页面，如果是爬虫访问则转发给prerender服务进行提前编译，否则直接返回js动态渲染页面。

其他Vue单页面seo优化可以参考：Vue单页项目SEO完全指南