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
是一模一樣的。
總結
1、相較於 Vue 的模板中大而全的webpack
配置項，預渲染
中的webpack
配置簡單小巧，如果你有一些額外的webpack
的配置需求的話，你可能需要自己動手。
2、我的這個專案
使用的是stylus
來作為css
預編譯語言，如果你想使用其他的css
預編譯語言的話，需要額外安裝一些外掛以及做一些簡單配置。當然了，預設的css
肯定是支援的。
3、在寫這個專案的過程中，也有做一些簡單的知識點記錄，vue-prerender 筆記
4、最後專案打包釋出到生產環境，使用npm run build
一鍵操作即可。如果你想要部署到子目錄下的話，那麼，你可能需要做一些簡單的修改，具體在vue-prerender 筆記
有提到。
後續如果有需要增加補充的說明，也會在vue-prerender
筆記中補充。