Vue 服務端渲染 & 預渲染

寫在前面

項目代碼：github.com/NeverYu

演示地址：git.io/fjkDg

本文着重講解預渲染以及使用方法，並提供相關技術說明、源碼以及演示地址；服務端渲染 內容較多，將在下一次整理髮出！

導讀

關於 Vue 的 SPA 說的已經太多了（在我以前的多個項目中，已經屢次使用到了，包括 sell，music，vue-cms 等多個項目），它爲咱們帶來了極速的開發體驗，極強的開發效率。可能惟一有些許不足的就是：當咱們對 SEO 很在意的時候，咱們如何去處理 SEO 的需求？

關於 SEO，Vue 也有現成的解決方案：Vue 服務端渲染

那麼

什麼是服務端渲染

服務端將完整的頁面 html 輸出到客戶端顯示，與 SPA （Single-Page-Application）使用 js 來渲染頁面有明顯區別。

爲何使用服務端渲染

• 更好的 SEO
• 更快的內容到達時間

服務端渲染 or 預渲染

就像官網所說的，若是你調研服務器端渲染(SSR)只是用來改善少數營銷頁面（例如 /, /about, /contact 等）的 SEO，那麼你可能須要預渲染，一個典型的預渲染使用場景可能相似這個網站。

服務端渲染與預渲染的區別

服務端渲染和預渲染的使用場景仍是有較明顯的區別的。預渲染的使用場景更可能是咱們所說的靜態頁面的形式，好比說這個網站。服務端渲染適用於大型的、動態的、頁面數據處理較多且較爲複雜的、與服務端有數據交互的功能型網站，一個明顯的使用場景就是電商網站。

如何使用預渲染

預渲染的核心是使用 prerender-spa-plugin，如何使用它呢？咱們須要用 npm 安裝它，而後在 webpack 中輕輕的引入它便可。

咱們仍是以本文示例中的這個網站的源代碼中的 webpack 配置爲例：

new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, 'dist'),
  routes: [ '/', '/home', '/information', '/ticket', '/scenery', '/about' ],
  renderer: new Renderer({
    headless: false,
    renderAfterDocumentEvent: 'render-event'
  })
})
複製代碼

PrerenderSPAPlugin 的配置是極其簡單的，咱們須要簡單的配置一下，項目全部的路由，最終生成後有幾個頁面，都是以這個配置爲依據，而不是你在 vue-router 中配置的路由。

而後再配置一下 renderAfterDocumentEvent；整個預渲染過程會在這個事件觸發後開始，事件的觸發是在 main.js 中作的：

// main.js
mounted () {
    // You'll need this for renderAfterDocumentEvent.
    document.dispatchEvent(new Event('render-event'))
}
複製代碼

main.js 中觸發這個事件，PrerenderSPAPlugin 知道 renderAfterDocumentEvent 觸發後，就會開始執行預渲染了，這個過程思路是很簡單的。

headless 設置爲 false 便可，在 npm run build 的時候，會啓動一個 Chromium 來進行簡單的測試。

細心的人可能會發現：爲何你源碼中 headless 配置的是 true？ 你知道爲何嗎？

最基礎也最核心的配置項也就這幾行代碼，固然，若是你有更多的需求配置項，你能夠去 github 上查看文檔，文檔中有更多的配置說明。

這些代碼方面的內容，只要你下載項目源碼，或者本身動手嘗試，將會很是簡單易懂

加強 SEO

有了預渲染之後，整個頁面的 SEO 已經很好了。但有時候咱們也會須要 meta 信息的動態變化（不一樣頁面有不一樣的 meta），好比 title、meta keywords 或者是 link，那麼這裏咱們可使用 vue-meta-info 這個插件。

vue-meta-info 是一個基於 Vue 2.0 的插件，它會讓你更好的管理你的 app 裏的 meta 信息。你能夠直接在組件內設置 metaInfo 即可以自動掛載到你的頁面中。若是你須要隨着頁面的變化，自動更新你的 Title、meta 等信息，那麼用此插件很是合適。

具體的使用，這裏就不貼代碼了，看源碼就能夠了，在 src/util/meta-info.js 中。

如何搭建一個預渲染開發環境

若是你也想要使用預渲染來開發你的網站的話，最簡單的方法就是克隆這個項目，而後根據你的需求，簡單刪減之後進行二次開發，整個的開發流程和 Vue 是如出一轍的。

總結

一、相較於 Vue 的模板中大而全的 webpack 配置項，預渲染中的 webpack 配置簡單小巧，若是你有一些額外的 webpack 的配置需求的話，你可能須要本身動手。

二、個人這個項目使用的是 stylus 來做爲 css 預編譯語言，若是你想使用其餘的 css 預編譯語言的話，須要額外安裝一些插件以及作一些簡單配置。固然了，默認的 css 確定是支持的。

三、在寫這個項目的過程當中，也有作一些簡單的知識點記錄，vue-prerender 筆記

四、最後項目打包發佈到生產環境，使用 npm run build 一鍵操做便可。若是你想要部署到子目錄下的話，那麼，你可能須要作一些簡單的修改，具體在 vue-prerender 筆記 有提到。後續若是有須要增長補充的說明，也會在 vue-prerender 筆記中補充。

---

寫在最後

個人主頁： neveryu.github.io/index.html

QQ羣：685486827