一、前言

     之前雖然一直有看過SEO相關的文章，但是一直沒去實踐過，然後突然技術總監要求要對咱們的官網做個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；

2. 新的html已經生成了，但是點選選單跳不進去那個html，還是用的js渲染的。

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

3.  mode由hash改成history布到伺服器上重新整理頁面會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. 開啟頁面之後，切換其他非預渲染頁面不渲染內容了。

解決： 在預渲染出來的頁面元件裡面加一個<div id="app"></div>。因為vue是掛在在div idwe為app的節點上的，把主頁通過外掛預渲染之後，自然沒了這個div，自然就渲染不出來了。

目前只有以上收穫，有新的進展再更新。

2018-08-11補充：

1. 只有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中尋找。