前言

---

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

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

预渲染的两种方式

---

1. prerender-spa-plugin：

   这个插件是一个webpack插件，此方式会在项目构建（npm run build）时将项目按路由打包成相对应的html静态文件。因此，仅有如下项目类型适用。

   • 路由是静态的，且非海量路由
   • 页面内容不需要使用ajax获取并展示内容

2. 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")
);

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完全指南