事情是這樣的
最近公司需要做一個(gè)網(wǎng)頁導(dǎo)航 集成文章功能的網(wǎng)站，不想重復(fù)造輪子，于是乎就在gitee上扒了一個(gè)開源的項(xiàng)目來改造。項(xiàng)目前端架構(gòu)是vue+elementui钦听。
千辛萬苦在項(xiàng)目收尾階段，老板突然說網(wǎng)站要做SEO倍奢。到時(shí)沒多想朴上，就覺的不就是seo嘛，加上關(guān)鍵字卒煞、描述標(biāo)題不就完事了痪宰，然后項(xiàng)目匆匆上線了。過了一陣子才不慌不忙的開始著手seo的事畔裕，當(dāng)我在瀏覽器右鍵查看網(wǎng)站源碼的時(shí)候衣撬，傻眼了，整個(gè)網(wǎng)站的body里只有一個(gè)醒目的div扮饶，如下
<body>
<div id="app"></div>
</body>
WTF...
才想起來具练，vue頁面是在前端渲染的，果斷度娘了一波甜无，一大片說vue不友好之類的扛点，看完我差點(diǎn)昏厥哥遮。
好在遇到同樣問題的不止我一個(gè)，找到了一些vue項(xiàng)目做seo優(yōu)化的解決方案占键，于是乎我順著前人的腳步，一步步開啟了我的seo踩坑之旅元潘。
選方案
網(wǎng)上找到的方案大致分四類畔乙，包括SSR服務(wù)器渲染，靜態(tài)化以及服務(wù)器無頭瀏覽器等翩概，優(yōu)劣不一牲距，各有千秋，筆者綜合考慮自身情況钥庇，選擇最后一種牍鞠，用PhantomJs針對(duì)爬蟲做處理。
詳細(xì)請(qǐng)參考：http://www.fly63.com/article/detial/3960
PhantomJs初使用
Phantomjs是一個(gè)基于webkit內(nèi)核的無頭瀏覽器评姨，即沒有UI界面难述，即它就是一個(gè)瀏覽器，只是其內(nèi)的點(diǎn)擊吐句、翻頁等人為相關(guān)操作需要程序設(shè)計(jì)實(shí)現(xiàn)胁后。這種解決方案其實(shí)是一種旁路機(jī)制，原理就是通過Nginx配置嗦枢，將搜索引擎的爬蟲請(qǐng)求轉(zhuǎn)發(fā)到一個(gè)node server攀芯，再通過PhantomJS來解析完整的HTML。
這里有一個(gè)方案可參考：http://www.reibang.com/p/2bbbc2fcd16d
但是筆者按照上述方案操作的時(shí)候文虏，會(huì)報(bào)一個(gè)Cannot find module 'express'的錯(cuò)誤侣诺，查了一下，是需要安裝express氧秘。
自己當(dāng)時(shí)太菜年鸳，并不知道express是個(gè)什么鬼，所以選了另外一種方法丸相，在github上找了一套別人打包好的vue-seo-phantomjs
按照上述操作阻星，最后執(zhí)行
phantomjs spider.js 'https://wj.qq.com/'
的時(shí)候，成功出現(xiàn)網(wǎng)站的html信息了已添。
但是仔細(xì)一看妥箕，發(fā)現(xiàn)還是沒有渲染的頁面，報(bào)錯(cuò)信息是
phantonjs ReferenceError: Can't find variable: Promise
Promise的坑
老辦法更舞，找度娘...
筆者在這一塊卡了一上午時(shí)間畦幢，踩了很多坑，甚至硬著頭皮查閱了老外的討論和筆記https://github.com/ariya/phantomjs/issues/12401
最后大概了解缆蝉，應(yīng)該是還差一個(gè)Promise的依賴宇葱。
解決辦法：在你的vscode（就是你的開發(fā)工具）的終端輸入
npm install es6-promise --save
然后在你項(xiàng)目的js中加入一串代碼
import Promise from 'es6-promise'
Promise.polyfill()
筆者是加在項(xiàng)目的main.js里瘦真，然后重新打包，部署黍瞧，最后終于看見了渲染后的頁面诸尽，激動(dòng)的眼眶都紅了
等等，還沒結(jié)束呢印颤。到這一步您机，可能大部分朋友已經(jīng)OK，但是可能部分小朋友的項(xiàng)目的代碼寫的不規(guī)范年局，或者濫用組件的原因际看，導(dǎo)致用phantomjs渲染的時(shí)候報(bào)錯(cuò)，這時(shí)矢否，就要根據(jù)報(bào)錯(cuò)信息逐個(gè)解決仲闽，一般報(bào)錯(cuò)信息是在你執(zhí)行 phantomjs spider.js '你的url' 之后會(huì)打印出來。
在此筆者會(huì)列出自己遇到的問題
URLSearchParams 坑
報(bào)錯(cuò)信息：
[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
---> <Info>
<Index>
<App>
<Root>
https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js:597 in warn
ReferenceError: Can't find variable: URLSearchParams
解決辦法1
棄用URLSearchParams僵朗。在vue項(xiàng)目中赖欣，注釋所有URLSearchParams相關(guān)用法，采用直接傳匿名對(duì)象
// 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項(xiàng)目路徑
root /opt/proj/kehai/goxp_nav/vue_web/dist;
index index.html index.htm;
}
}
結(jié)束語
小菜鳥筆者的踩坑日常验庙，讓大佬見笑了畏鼓，本文旨在幫助那些遇到同樣問題的人能避免入坑，因?yàn)樽约涸谶@個(gè)坑花了太久時(shí)間壶谒，然后網(wǎng)上也沒有找到很好方法云矫，故希望此文能幫到需要的人
