事情是这样的

最近公司需要做一个网页导航集成文章功能的网站，不想重复造轮子，于是乎就在gitee上扒了一个开源的项目来改造。项目前端架构是vue+elementui。
千辛万苦在项目收尾阶段，老板突然说网站要做SEO。到时没多想，就觉的不就是seo嘛，加上关键字、描述标题不就完事了，然后项目匆匆上线了。过了一阵子才不慌不忙的开始着手seo的事，当我在浏览器右键查看网站源码的时候，傻眼了，整个网站的body里只有一个醒目的div，如下

WTF...
才想起来，vue页面是在前端渲染的，果断度娘了一波，一大片说vue不友好之类的，看完我差点昏厥。
好在遇到同样问题的不止我一个，找到了一些vue项目做seo优化的解决方案，于是乎我顺着前人的脚步，一步步开启了我的seo踩坑之旅。

选方案

网上找到的方案大致分四类，包括SSR服务器渲染，静态化以及服务器无头浏览器等，优劣不一，各有千秋，笔者综合考虑自身情况，选择最后一种，用PhantomJs针对爬虫做处理。
详细请参考：http://www.fly63.com/article/detial/3960

PhantomJs初使用

Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML。
这里有一个方案可参考：https://www.jianshu.com/p/2bbbc2fcd16d

但是笔者按照上述方案操作的时候，会报一个Cannot find module 'express'的错误，查了一下，是需要安装express。
自己当时太菜，并不知道express是个什么鬼，所以选了另外一种方法，在github上找了一套别人打包好的vue-seo-phantomjs

按照上述操作，最后执行

phantomjs spider.js 'https://wj.qq.com/'

的时候，成功出现网站的html信息了。
但是仔细一看，发现还是没有渲染的页面，报错信息是

phantonjs ReferenceError: Can't find variable: Promise

Promise的坑

老办法，找度娘...
笔者在这一块卡了一上午时间，踩了很多坑，甚至硬着头皮查阅了老外的讨论和笔记https://github.com/ariya/phantomjs/issues/12401
最后大概了解，应该是还差一个Promise的依赖。
解决办法：在你的vscode（就是你的开发工具）的终端输入

npm install es6-promise --save

然后在你项目的js中加入一串代码

import Promise from 'es6-promise'
Promise.polyfill()

笔者是加在项目的main.js里，然后重新打包，部署，最后终于看见了渲染后的页面，激动的眼眶都红了

等等，还没结束呢。到这一步，可能大部分朋友已经OK，但是可能部分小朋友的项目的代码写的不规范，或者滥用组件的原因，导致用phantomjs渲染的时候报错，这时，就要根据报错信息逐个解决，一般报错信息是在你执行 phantomjs spider.js '你的url' 之后会打印出来。
在此笔者会列出自己遇到的问题

URLSearchParams 坑

报错信息：

[root@VM-0-10-centos phantomjs]# phantomjs spider.js 'http://106.52.91.112:9527/#/info?blogUid=fc654f40718341ef01edf13ce71f1fea'
[Vue warn]: Error in created hook: "ReferenceError: Can't find variable: URLSearchParams"

found in

---> 
       
         
           

  https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js:597 in warn
ReferenceError: Can't find variable: URLSearchParams

解决办法1

弃用URLSearchParams。在vue项目中，注释所有URLSearchParams相关用法，采用直接传匿名对象

          // var params = new URLSearchParams();
          // params.append("uid", this.blogUid);
          getBlogByUid({uid: this.blogUid}).then(response => {
            if (response.code == this.$ECode.SUCCESS) {
              this.blogData = response.data;
            }
            setTimeout(()=>{
              that.blogContent = response.data.content
              that.loadingInstance.close();
            }, 200)
          });

Nginx配置

upstream spider_server {
    server localhost:8081;
}
server {
    listen       80;
    server_name  www.lidh.vip;
    
    location / {
      proxy_set_header  Host            $host:$proxy_port;
      proxy_set_header  X-Real-IP       $remote_addr;
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;

      if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {
        proxy_pass  http://spider_server;
      }
      
      # vue项目路径
      root   /opt/proj/kehai/goxp_nav/vue_web/dist;
      index  index.html index.htm;
    }
}

结束语

小菜鸟笔者的踩坑日常，让大佬见笑了，本文旨在帮助那些遇到同样问题的人能避免入坑，因为自己在这个坑花了太久时间，然后网上也没有找到很好方法，故希望此文能帮到需要的人

vue网站SEO优化持续踩坑（PhantomJS）