prerender-spa-plugin插件只能對(duì)靜態(tài)的頁(yè)面做預(yù)渲染實(shí)現(xiàn)SEO優(yōu)化，如果是后臺(tái)請(qǐng)求的數(shù)據(jù)需要做SSR處理，例如商品詳情頁(yè)，可使用Vue SSR，詳細(xì)參考我的另一篇博客：VueSSR的一些理解和詳細(xì)配置

一、前言

之前雖然一直有看過(guò)SEO相關(guān)的文章，但是一直沒(méi)去實(shí)踐過(guò)，然后突然技術(shù)總監(jiān)要求要對(duì)咱們的官網(wǎng)做個(gè)SEO的優(yōu)化。

于是才正式動(dòng)手搞這玩意。地址：火石創(chuàng)造官網(wǎng)

首頁(yè)用的根目錄的index.html

/bluebook頁(yè)面用的bluebook目錄下的index.html。

對(duì)于搜索引擎蜘蛛的工作原理就不再詳細(xì)的復(fù)述了，網(wǎng)上相關(guān)博客很多。

大致講講自己對(duì)單頁(yè)面應(yīng)用的SEO不友好的地方的理解吧。

對(duì)于單頁(yè)面應(yīng)用，只有一個(gè)html文件，是所有頁(yè)面的載體，vue通過(guò)js控制路由然后渲染出對(duì)應(yīng)的頁(yè)面，而搜索引擎蜘蛛是不會(huì)去執(zhí)行頁(yè)面的js的，導(dǎo)致搜索引擎蜘蛛只能收錄index.html一個(gè)頁(yè)面，在百度中就搜索不到相關(guān)的子頁(yè)面的內(nèi)容。這會(huì)引起兩個(gè)問(wèn)題

1. 收錄的頁(yè)面少了，點(diǎn)擊量之類的也就少了；

2. 不能對(duì)對(duì)應(yīng)的頁(yè)面做TDK(title, keywords, description)不同的配置，這個(gè)可以配合vue-meta-info插件生成。

那么，要想解決這個(gè)問(wèn)題，html文檔就不能通過(guò)js生成，目前了解到的有兩種方法，vue的ssr渲染(官方文檔)和prerender-spa-plugin插件實(shí)現(xiàn)(詳細(xì)配置)。SSR目前沒(méi)有條件去嘗試，所以選了個(gè)較為簡(jiǎn)便的第二種方法。

二、過(guò)程

prerender-spa-plugin的配置其實(shí)很簡(jiǎn)單。就下面一個(gè)配置就行了。

主要講講集成的gu過(guò)程中遇到的坑：

1. 路由mode必須是history；

2. 新的html已經(jīng)生成了，但是點(diǎn)擊菜單跳不進(jìn)去那個(gè)html，還是用的js渲染的。

解決：

1.將根目錄的index.html也設(shè)計(jì)成預(yù)渲染頁(yè)面；  2. 在最外層的<router-view></router-view>外加一個(gè)<div id="app"></div>(渲染節(jié)點(diǎn))

3.  mode由hash改成history布到服務(wù)器上刷新頁(yè)面會(huì)404。nginx需要更改配置

location / {
        try_files $uri $uri/ /index.html;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto  $scheme;
    }

4. 打開(kāi)頁(yè)面之后，切換其他非預(yù)渲染頁(yè)面不渲染內(nèi)容了。

解決：

在預(yù)渲染出來(lái)的頁(yè)面組件里面加一個(gè)<div id="app"></div>。因?yàn)関ue是掛在在div idwe為app的節(jié)點(diǎn)上的，把主頁(yè)通過(guò)插件預(yù)渲染之后，自然沒(méi)了這個(gè)div，自然就渲染不出來(lái)了。

目前只有以上收獲，有新的進(jìn)展再更新。

補(bǔ)充：

1. 只有a標(biāo)簽，才能跳進(jìn)預(yù)渲染頁(yè)面，router-link或者$router.push跳轉(zhuǎn)會(huì)被js代理渲染；

2. 如detail/:id或者user/:id這種動(dòng)態(tài)路由也是可以使用預(yù)渲染的，prerender-spa-plugin插件中配置['/detail']即可，當(dāng)然，這個(gè)預(yù)渲染頁(yè)面肯定是沒(méi)內(nèi)容的，會(huì)在訪問(wèn)的時(shí)候生成真是的數(shù)據(jù)。   這個(gè)有誤，貌似處理不了動(dòng)態(tài)頁(yè)面...

3. prerender-spa-plugin的新版本是依賴的谷歌的瀏覽器的，利用谷歌的無(wú)頭瀏覽器，在不打開(kāi)瀏覽器的情況下，渲染編譯出html。但是谷歌瀏覽器又一兩百兆，在window環(huán)境還好，但是到服務(wù)器上，通過(guò)jekins去編譯，或者直接在服務(wù)器上執(zhí)行npm run build會(huì)失敗。這時(shí)候跳過(guò)安裝谷歌瀏覽器，翻墻去谷歌下個(gè)linux版本的瀏覽器，然后在服務(wù)器上安裝，一般安裝好之后會(huì)默認(rèn)在/usr/lib中，代碼里面也不需要在prerender-spa-plugin配置中配置puppeteer.launch的executablePath(可執(zhí)行路徑)，會(huì)默認(rèn)去/usr/lib中尋找。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論