手把手教你 Vue 服務端渲染

時間 2019-11-09

標籤手把手 vue 服務渲染简体版

原文原文鏈接

寫在前面

在寫這篇文章以前，我有寫一篇 Vue 預渲染的教程以及在線示例，有須要的能夠看一下~html

【下面開始 Vue 服務端渲染】vue

服務端渲染 = SSR = Server-Side Renderingwebpack

Vue 服務器渲染能夠說是咱們學習 Vue 技術的最後一個環節了；也是上手難度稍爲高一點的一個環節。git

目前尚未發現很好的學習資料或者教程，文檔也不是特別明白，這也致使了不少人沒能拿下 vue 的 ssr。github

因此就想着寫一個曲線平滑，按部就班，明瞭易懂的教程來幫助你們找到 Vue SSR 的感受。web

導讀

因爲內容較多，若是隻寫一篇文章就想把 Vue SSR 介紹清晰透徹的話，我以爲不太現實；因此就想着把一個完整的 Vue SSR 項目細分開來，每個小節講解一個知識點，這樣效果應該會好一點吧。這個項目雖然不大，但已經包含了 Vue SSR 的全部內容。vue-router

項目倉庫：github.com/Neveryu/vue…vuex

一、這個教程分爲 7 個小節，每一個小節都是一個獨立的能夠運行的小項目，這樣能夠減小你們出錯的機率（若是隻給出最終的代碼，那萬一又跑不起來，豈不涼涼，影響你們學習的心情）；每一個小節簡單配備了 運行步驟 以及 簡要說明 來幫助你們運行項目以及瞭解本節的知識點。緩存

二、其次，每一個小節都是在前一小節的基礎上，繼續補充寫代碼的，這樣，你們對比就能知道，這一節具體增長了哪些代碼，哪些內容；方便你們學習某一個小節的知識（若是籠統的一次性給出最終代碼，這樣在找代碼之間邏輯關係時，比較吃力）服務器

章節介紹

第一節：一個最簡單的服務端渲染原型（10 行代碼）【難度：★】

第二節：與服務器集成，使用 Express 做爲服務器提供服務【難度：★】

第三節：使用一個頁面模版【難度：★】

第四節：開發客戶端與服務端入口文件，配置webpack【難度：★★★】

第五節：使用vue-router來作路由【難度：★★】

第六節：數據，vuex，狀態容器【難度：★★★★★】

第七節：增長一些額外的功能，完善項目【難度：★★】

如何學習

一、建議你先看一遍 Vue SSR 的文檔，看不懂的地方不要慌，留個印象也行
二、學習這個課程的時候，打開 Vue SSR 的文檔；找到當前這一小節對應文檔中的文字介紹部分
三、若是你基礎有點薄弱的話，不要太過於着急
四、不能保證全部人看一遍就能學會，可是能保證全部人，兩遍應該沒問題
五、若是你能跟着動手敲的話，將會事半功倍

知識點

一、避免單例狀態 在 app.js 中，暴露一個能夠重複執行的工廠函數，爲每一個請求建立新的應用程序實例。

相關文檔

二、配置webpack webpack 配置文件包含：基本配置(base config)、客戶端配置(client config)、服務器配置(server config)。基本配置包含兩個環境（客戶端環境，服務器環境）共享的配置；而後客戶端配置和服務器配置都會經過使用 webpack-merge 來簡單的擴展基本配置。

相關文檔

教程中的 webpack 相關的配置已經配置好了，你能夠直接所有拿過來用就好了

三、createBundleRenderer 咱們在前三節使用的都是 vue-server-renderer 中的 createRenderer 方法；從第四節開始，咱們使用的是 createBundleRenderer，所建立的 bundle renderer，用法和普通 renderer 相同。 createBundleRenderer 接收一個 server bundle 生成的特殊 JSON 文件。可是 bundle renderer 提供如下優勢：

內置的 source map 支持（在 webpack 配置中使用 devtool: 'source-map'）
在開發環境甚至部署過程當中熱重載（經過讀取更新後的 bundle，而後從新建立 renderer 實例）
關鍵 CSS(critical CSS) 注入（在使用 *.vue 文件時）：自動內聯在渲染過程當中用到的組件所需的 CSS。更多細節請查看 CSS 章節。
使用 clientManifest 進行資源注入：自動推斷出最佳的預加載(preload)和預取(prefetch)指令，以及初始渲染所需的代碼分割 chunk。