首页与bluebook页面路径不同，单页面应用SEO不友好在哪？

首页用的根目录的index.html

于/bluebook页面所运用的，乃是处于bluebook目录之下的index.html。

关于搜索引擎蜘蛛的工作原理，就不会再去详细地进行复述了，在网上，相关的博客是非常多的。

大致讲讲自己对单页面应用的SEO不友好的地方的理解吧。

对于单个页面应用而言，仅有一个html文件，它作为所有页面的承载者，vue借助js操控路由进而将对应的页面渲染出来，然而搜索引擎蜘蛛并不会去执行页面的js，致使搜索引擎蜘蛛仅仅能够收录index.html这一个页面，在百度里面就无法搜索到相关子页面的内容，如此便会引发两个问题 。

1. 收录的页面少了，点击量之类的也就少了；

2. 对应的页面，不能进行TDK（title、keywords、description）不同的配置，这个配置能够借助vue - meta - info插件来生成 。

那么，在想要解决这个问题的情况下，html文档是不可以借助js来生成的，当下所了解到的存在两种方法，一种是vue的ssr渲染，也就是官方文档所提及的，另一种是通过prerender - spa - plugin插件来实现，这需要详细配置。由于目前没有条件去对SSR进行尝试，因而选择了较为简便的第二种方法。

二、过程

关于prerender - spa - plugin的配置，实际上是颇为简易的，仅仅下面这一个配置便足够了，。

主要讲讲集成的gu过程中遇到的坑：

1. 路由mode必须是history；

生成了新的html，然而点击菜单却无法进入那个html，并且它还是通过js进行渲染的。

解决：

把根目录那儿的index.html，也弄成预渲染的页面；并且在最外面那一层，额外加一个(渲染节点)。

3. 将mode从hash改成history后，布到服务器上，刷新页面就会出现404的情况，nginx需要进行配置更改。

location / {
尝试文件，按照$uri，$uri/的顺序，若找不到就使用/上的index.html；。
设置代理头部中的一个条件，将名为 X - Real - IP 的头部信息，设置为客户端的真实 IP 地址，它等同于远程地址 。
设置代理头部信息，将X - Forwarded - For设置为$proxy_add_x_forwarded_for的值，。
设置代理头部信息，将X - Forwarded - Proto的值设为$scheme 。
    }

4. 打开页面之后，切换其他非预渲染页面不渲染内容了。

解决：

预渲染得出的页面组件之中添加一个，鉴于vue是挂载至div id为app的节点之上的，主页经插件预渲染后，此div便不复存在了，故而无法渲染出来。

目前只有以上收获，有新的进展再更新。

补充：

仅有a标签，方可跳入预渲染页面，router-link亦或$router.push跳转将会被js代理渲染 。

2. 像detail/:id，或者user/:id这样的动态路由，同样是能够运用预渲染的，在prerender-spa-plugin插件里进行配置 。

'/detail'

仅这就可以了，不言而喻能够如此，当然了，这个预先进行渲染的页面实实在在肯定是不存在任何内容的，将会在被访问之际产生真实确切的数据了 。这个存在错误之处，看起来好像是没办法处理动态页面的...

3. prerender - spa - plugin的新版本依赖谷歌浏览器，借助谷歌的无头浏览器，于不打开浏览器的情形下，实现渲染来编译出html。然而，谷歌浏览器有一两百兆，在window环境尚可，可到服务器上，经由jekins去编译，或者直接在服务器上执行npm run build就会失败。此刻越过安装谷歌浏览器的步骤，借助翻墙手段前往谷歌下载一个基于linux版的浏览器，随后在服务器上实施安装，通常安装完毕后会默认处于/usr/lib之内，代码之中也无需在prerender - spa - plugin配置里对puppeteer.launch的executablePath（可执行路径）加以配置，会默认前往/usr/lib里找寻。

上述内容乃个人所拥有的经验，期望能够给予大家一份可供参考的内容，并且也期望大家能够对脚本之家予以诸多的支持 。