前言
单页应用（SPA）是最近流行的一种应用模式，它支持在同一页面下通过哈希（hash）或html5的history api实现不刷新式切换视图，既实现了动态路由的变化，也实现了历史记录的保持，然而，相比于静态页面和动态页面（ASP/PHP/JSP）而言，缺点也是显而易见的，那就是对SEO不友好。
不管是Vue、React还是angular等实现路由的框架，无一不是加载原始html代码，再通过JavaScript动态渲染页面，但对于爬虫而已，JavaScript代码是不会执行的，从而导致爬取不到合适的内容。
解决方案
搜索爬虫不会去执行js代码，只会从原有的html中读取相关信息，所以总的解决方案是尽可能保证原始html代码包含希望被收录的信息，有下面几种方案：
1、页面中使用隐藏式元素在html源码上写入希望被收录的静态信息，但不显示出来，仅为爬虫服务。
2、专门为爬虫开一个服务在后端做http拦截，检查请求代理User-Agent是不是爬虫，如果检测到是爬虫类型，动态生产html片段，仅为爬虫服务。
3、使用预渲染（preredner）在构建项目的同时，自动在浏览器中渲染一遍页面，然后生成相应路由下的静态html，这些路由只有在不执行javascript时才会显示（正是爬虫的情况），如果执行了js，将触发常规逻辑。
4、使用服务端渲染（SSR）并非动态页面，而是在node端执行vue代码，翻译转换得出相应的html片段/全文，最后在响应体中返回信息（后续文章介绍）。
综合考虑后，方式一适合简单修改，方式二修改难度高，方式三和方式四最为合适。从简易难度而已，预渲染是最简单最快捷的，所以这里先介绍预渲染的seo优化方式。
使用
先安装prerender-spa-plugin模块，然后修改路由为history模式，紧接着在打包配置中（webpack.prod.config.js或vue.config.js)添加PrerenderSPAPlugin插件,最后在入口文件中触发相关事件即可。
PrerenderSPAPlugin
由于该插件需要电脑上已安装浏览器软件才可以运行，如果需要在没有浏览器的linux上运行打包，需要先检查电脑版本再添加插件，判断方式如下：
// build/webpack.prod.conf.js 或 vue.config.js
main.js入口文件在 vue 实例完成后执行
// main.js
最后因为我们修改了路由模式为history，普通情况下对于浏览器而言‘/list/detail’实际上是要去请求‘/list/detail/index.html’页面，这显然不存在，会报404异常。所以我们需要对nginx服务器进行代理转发，设置如下：
# ect/nginx/nginx.conf# vue最小管理系统配置（后台服务3000端口）server {listen 8080; # 监听8080端口root /www/vue-base-demo/dist/; // 静态资源目录index index.html; // 首页location / {try_files $uri $uri/ /index.html; # 当找不到文件404的时候，转发的index.html上}}
当然其他服务器也可以实现，只要思路一样就行。
打包
npm run build
打包后将在dist文件夹下生成相应的html文件。
预渲染注意事项· vue-cli 2.x 和 vue-cli 3.x 配置差不多 · 路由需要使用 history 模式 · 预渲染配置 routes 属性可以填写路由对应的 url，如果需要参数需要配置合适的参数 · renderAfterDocumentEvent 需要对应 · 预渲染打包前会自动打开浏览器从而获取到相关 dom，如果没有浏览器软件将打包失败（建议· 把 dist 包括在 git 项目内） · nginx 需要相应的修改，避免 404
