Nuxt.js 實戰

一、背景

在今年年初我開始接觸vue的時候，就發現在vue官方文檔中「服務端渲染」的一節中提到了Nuxt.js框架，SSR這種方式對於首屏的載入時間優化顯而易見，同時還可以方便的進行SEO。美團點評的點餐業務中，數據平台因為其數據量大的特點，首頁載入時間很長，非常適合進行SSR改造；於是，我在非工作時間對nuxt.js框架進行了嘗試，吃了一波螃蟹。本文對nuxt.js框架應用於生產環境進行了系統的論述，同時對所踩的坑也進行了一定的介紹。

官方對nuxt.js的介紹如下：

Properly configuring all the discussed aspects of a production-ready server-rendered app can be a daunting task. Luckily, there is an excellent community project that aims to make all of this easier: Nuxt.js. Nuxt.js is a higher-level framework built on top of the Vue ecosystem which provides an extremely streamlined development experience for writing universal Vue applications. Better yet, you can even use it as a static site generator (with pages authored as single-file Vue components)! We highly recommend giving it a try.

可以看出，vue官方對於nuxt.js的態度非常積極，還是值得大家嘗試的，目前最新版本：1.0.0-rc2；1.0正式版即將發布，撒花！

因本文作者水平所限，如有錯誤，歡迎拍磚。

二、nuxt.js 簡單介紹

1、nuxt.js的原理圖：

具體的原理介紹官網有詳細的解釋，歡迎讀者移步官網，這裡不再複述。

2、nuxt.js的優勢

1）就是我們無需為了路由劃分而煩惱，你只需要按照對應的文件夾層級創建 .vue 文件就行

2）無需考慮數據傳輸問題，nuxt 會在模板輸出之前非同步請求數據（需要引入 axios 庫），而且對 vuex 有進一步的封裝

3）內置了 webpack，省去了配置 webpack 的步驟，nuxt 會根據配置打包對應的文件

三、技術棧選型

1、nuxt.js：0.10.6

2、axios：0.16.2 → 選擇axios的原因很簡單，它是vue官方推薦的包，並且axios可以運行於瀏覽器端和伺服器端，減少了前端工程師的學習成本。

3、elementUI：1.3.7 → elementUI是基於vue的很全面的ui組件庫，對於一個自己的驗證項目很合適，可以快速開發，快速上線。

四、實施方案

工程的目錄結構如下：

1、插件安裝

你可以配置需要在「根vue.js應用」實例化之前需要運行的js插件，當然可以是你自己寫的或第三方模塊。

注意：在任何vue組件的生命周期內，只有beforeCreate和created這兩個鉤子會在瀏覽器端和服務端均被調用；其他的鉤子都只會在瀏覽器端調用。

1）對於axios這種ajax請求插件，無疑會使用在頁面的方方面面中，那麼如果在每個頁面中使用import方式進行引入，會導致在打包的時候打包多次。而實際上我們只需要打包一次，可以通過在nuxt.config.js裡面的build.vendor來解決。

當然，如果你需要區分測試環境和線上環境的介面地址，就需要在plugins文件中對axios進行編寫，如圖：

2）使用vue插件 - elementUI

普通的npm包的引入方式如上面的axios所述，那麼vue插件我們該怎麼處理呢？

1. 首先我們需要在plugins文件夾中添加插件文件，element-ui.js

2. 在nuxt.config.js中配置plugins欄位

3. 由於elementUI是第三方庫，我們需要把它打包到庫文件裡面以獲得更好的緩存效果。在nuxt.config.js中配置element-ui即可。

3）同時nuxt還支持區分只在瀏覽器中運行和只在服務端運行的插件

1. 只在瀏覽器運行：配置nuxt.config.js中plugins欄位，將引入的插件屬性設置為ssr： false

2. 只在服務端運行：直接在webpack打包server.bundle.js文件中，將process.SERVER_BUILD設置為true即可

2、layout布局

nuxt.js實現了一個新的概念，layout布局，我們可以通過layout布局方便的實現頁面的多個布局之間方便的切換。本項目中實現了三種常用的布局，即：1）兩欄布局，左欄固定，右欄動態寬度；2、錯誤頁提示，頁面中間一個提示框的布局方案；3、純白頁面布局。

以兩欄布局舉例：

1. 首先，在layout → default.vue中編寫默認布局

layout與頁面的具體內容的插口即：nuxt標籤

2. 具體開發的頁面中，如果使用默認布局，則不需指定頁面的布局，nuxt框架會自動對沒有指定布局的頁面和default布局進行關聯。如果需要指定布局，則在layout欄位中對布局進行指定。如圖在login頁面中對full布局進行了指定。

註：個人開發感受：layout布局對於頁面類型多變的工程很有好處，我們可以減少冗餘代碼，並且方便開發人員在多個布局中簡單切換。nuxt框架將頁面分層劃分為3層：1、布局；2、頁面；3、組件

這麼劃分邏輯上更清楚，也更貼近組件化頁面開發的思想。

PS：個人在非vue項目中也自行實現了一個簡單的layout布局，使用slot插口即可實現。

layout文件提供slot插口

在開發頁面中將layout文件以組件的方式引入即可。

3、server端api編寫

nuxt的server端使用的是express，故server端api直接編寫express router即可。server端目錄組織如圖：

server/index.js 文件是express的啟動文件，plugins和middleware文件是axios的配置，api文件夾內即api介面。

server/index.js文件裡面對api引用如下：

我們先看看axios的配置，通過對process.env的匹配來區分線上與測試環境，同時在middleware文件中對介面進行鑒權。

之後在api/index.js文件中對各介面進行引用和聚合

在所有介面文件中，以announcement.js舉例：

可以看到為了實現簡便和避免過度設計，api介面沒有對數據進行重新封裝，直接進行了透傳處理。

4、頁面路由

nuxt框架的頁面路由使用了vue-router，但是我們不需要對頁面的路由進行過多的操心，因為我們只要按照nuxt規範的頁面文件目錄結構進行設計，就可以自動生成vue-router文件。或者說我們存放頁面的目錄結構會直接影響最終生成的路由配置。

本項目的頁面目錄結構如圖所示：

而生成的router文件為：

可以看出生成的路由與pages文件夾目錄結構是一一對應的。

注意：其中帶參數的動態路由，需要創建對應的下劃線作為前綴的vue文件或目錄。例如圖中bidDetail/_id.vue文件，最終生成的路由即為：path: "/bidDetail/:id?"。

五、總結

從頭搭建一個服務端渲染的框架其實是相當複雜的，不過有了nuxt.js後，我們可以很輕易的搭建出一個可擴展可定製的SSR框架，這大大的減少了我們搭建框架的時間成本。因為nuxt的官方文檔寫的足夠詳細，我沒有對安裝這類常規項進行描述，直接從插件安裝、新概念 - layout布局、server端api、pages的組織入手，介紹了我在項目實戰中使用nuxt框架的一些關鍵路徑。目前項目上線在aws跑了半個多月，總體穩定，說明雖然nuxt不是1.0版本，但是也足夠用於生產實踐了。（考慮到github上說。nuxt的1.0版本即將到來，我們有理由期待vue的SSR前景）

由於本文作者水平與篇幅所限，不能對項目中的所有細節盡述，對nuxt感興趣的讀者可以郵件聯繫：wangxinghang@meituan.com，感謝~

推薦閱讀：