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

一、前言

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

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

首頁用的根目錄的index.html

/bluebook頁面用的bluebook目錄下的index.html。

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

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

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

1. 收錄的頁面少了，點擊量之類的也就少了；

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

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

二、過程

prerender-spa-plugin的配置其實很簡單。就下面一個配置就行了。

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

1. 路由mode必須是history；

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

解決：

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

3.  mode由hash改成history布到服務(wù)器上刷新頁面會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. 打開頁面之后，切換其他非預(yù)渲染頁面不渲染內(nèi)容了。

解決：

在預(yù)渲染出來的頁面組件里面加一個<div id="app"></div>。因為vue是掛在在div idwe為app的節(jié)點上的，把主頁通過插件預(yù)渲染之后，自然沒了這個div，自然就渲染不出來了。

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

補(bǔ)充：

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

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

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

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

最新評論