vue使用prerender-spa-plugin预渲染达到SEO优化

传统页面和框架开发的区别

• 传统html是通过a标签跳转来作为切换的，每一个页面都是一个html，这样百度很容易抓取到的，也能顺着a链接到你的子级页面。
• 像vue、react、angular开发的都是spa应用，他只有一个页面index，他们都是内加载，动态加载切换路由的，所以你再多页面百度蜘蛛只能爬到首页，这就是spa的一大痛点

解决方案
说完了区别说下怎么解决这个问题，目前我所了解的两种：

1. vue.js官网提供的 SSR（服务端渲染） 这种方案呢学习成本高，对于刚开始的新手来说可能有点难度，基本还得重构项目，为了节约开发成本推荐选择第二种方案；
2. 预渲染：用vue官方的一句话来说，它无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

prerender-spa-plugin它所做的预渲染就是当vue-cli构建的项目进行npm run build 的时候，会按照路由的层级进行动态渲染出对应的html文件，这样爬虫在爬取页面的时候就不会再是一个简简单单的 index.html 入口文件了。

1.安装prerender-spa-plugin

npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
npm i puppeteer
npm i prerender-spa-plugin --save -dev

2.在router.js看下路由模式是不是 ‘history’，