八、SPA单页面实现SEO优化之预渲染prerender-spa-plugin

一、前言

关于SPA和SEO优化、SSR服务器渲染的介绍可以参考这里：
六、什么是SEO优化（搜索引擎优化）？SPA单页面应用如何实现SEO优化？

通过上一篇文章我们介绍了服务端渲染的方式来实现单页面应用的SEO优化。但是，服务端渲染的方式对开发并不友好，它需要约定各种规范，比较适合开发大型网站。
对于一些微型网站，比如个人博客，或者公司的小型应用网站，路由数量，页面数量并不多，我们可以使用prerender-spa-plugin预渲染来实现SPA单页面的SEO优化。
它的优点是简单方便，不需要改动太多原来的项目内容。

二、prerender-spa-plugin预渲染方式实现SEO

插件介绍

这里要介绍的是基于prerender-spa-plugin与vue-meta-info的一套官网前端SEO预渲染方案。

prerender-spa-plugin：
prerender-spa-plugin是一个webpack插件，其作用是将渲染的页面固化成HTML文件。原理是利用无头浏览器（puppeteer）遍历配置中的路由，在收到结束的事件时，将当时的页面数据输出成HTML文件。

vue-meta-info：
vue-meta-info是一个能在vue中使用的工具，能在vue文件中动态更改当前页面的m