一、背景
在今年年初我開始接觸vue的時候，就發現在vue官方文檔中“服務端渲染”的一節中提到了Nuxt.js框架，SSR這種方式對于首屏的加載時間優化顯而易見，同時還可以方便的進行SEO。愛掏網 - it200.com美團點評的點餐業務中，數據平臺因為其數據量大的特點，首頁加載時間很長，非常適合進行SSR改造；于是，我在非工作時間對nuxt.js框架進行了嘗試，吃了一波螃蟹。愛掏網 - it200.com本文對nuxt.js框架應用于生產環境進行了系統的論述，同時對所踩的坑也進行了一定的介紹。愛掏網 - it200.com
官方對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正式版即將發布，撒花！
因本文作者水平所限，如有錯誤，歡迎拍磚。愛掏網 - it200.com
二、nuxt.js 簡單介紹
1、nuxt.js的原理圖：
具體的原理介紹官網有詳細的解釋，歡迎讀者移步官網，這里不再復述。愛掏網 - it200.com
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可以運行于瀏覽器端和服務器端，減少了前端工程師的學習成本。愛掏網 - it200.com
3、elementUI：1.3.7 → elementUI是基于vue的很全面的ui組件庫，對于一個自己的驗證項目很合適，可以快速開發，快速上線。愛掏網 - it200.com
四、實施方案
工程的目錄結構如下：
1、插件安裝
你可以配置需要在“根vue.js應用”實例化之前需要運行的js插件，當然可以是你自己寫的或第三方模塊。愛掏網 - it200.com
注意：在任何vue組件的生命周期內，只有beforeCreate和created這兩個鉤子會在瀏覽器端和服務端均被調用；其他的鉤子都只會在瀏覽器端調用。愛掏網 - it200.com
1）對于axios這種ajax請求插件，無疑會使用在頁面的方方面面中，那么如果在每個頁面中使用import方式進行引入，會導致在打包的時候打包多次。愛掏網 - it200.com而實際上我們只需要打包一次，可以通過在nuxt.config.js里面的build.vendor來解決。愛掏網 - it200.com
當然，如果你需要區分測試環境和線上環境的接口地址，就需要在plugins文件中對axios進行編寫，如圖：
2）使用vue插件 - elementUI
普通的npm包的引入方式如上面的axios所述，那么vue插件我們該怎么處理呢？
- 首先我們需要在plugins文件夾中添加插件文件，element-ui.js
-
在nuxt.config.js中配置plugins字段
-
由于elementUI是第三方庫，我們需要把它打包到庫文件里面以獲得更好的緩存效果。愛掏網 - it200.com在nuxt.config.js中配置element-ui即可。愛掏網 - it200.com
3）同時nuxt還支持區分只在瀏覽器中運行和只在服務端運行的插件。愛掏網 - it200.com
- 只在瀏覽器運行：配置nuxt.config.js中plugins字段，將引入的插件屬性設置為ssr： false
- 只在服務端運行：直接在webpack打包server.bundle.js文件中，將process.SERVER_BUILD設置為true即可
2、layout布局
nuxt.js實現了一個新的概念，layout布局，我們可以通過layout布局方便的實現頁面的多個布局之間方便的切換。愛掏網 - it200.com本項目中實現了三種常用的布局，即：1）兩欄布局，左欄固定，右欄動態寬度；2、錯誤頁提示，頁面中間一個提示框的布局方案；3、純白頁面布局。愛掏網 - it200.com
以兩欄布局舉例：
- 首先，在layout → default.vue中編寫默認布局
layout與頁面的具體內容的插口即：nuxt標簽
- 具體開發的頁面中，如果使用默認布局，則不需指定頁面的布局，nuxt框架會自動對沒有指定布局的頁面和default布局進行關聯。愛掏網 - it200.com如果需要指定布局，則在layout字段中對布局進行指定。愛掏網 - it200.com如圖在login頁面中對full布局進行了指定。愛掏網 - it200.com
注：個人開發感受：layout布局對于頁面類型多變的工程很有好處，我們可以減少冗余代碼，并且方便開發人員在多個布局中簡單切換。愛掏網 - it200.comnuxt框架將頁面分層劃分為3層：1、布局；2、頁面；3、組件
這么劃分邏輯上更清楚，也更貼近組件化頁面開發的思想。愛掏網 - it200.com
PS：個人在非vue項目中也自行實現了一個簡單的layout布局，使用slot插口即可實現。愛掏網 - it200.com
layout文件提供slot插口
在開發頁面中將layout文件以組件的方式引入即可。愛掏網 - it200.com
3、server端api編寫
nuxt的server端使用的是express，故server端api直接編寫express router即可。愛掏網 - it200.comserver端目錄組織如圖：
server/index.js 文件是express的啟動文件，plugins和middleware文件是axios的配置，api文件夾內即api接口。愛掏網 - it200.com
server/index.js文件里面對api引用如下：
我們先看看axios的配置，通過對process.env的匹配來區分線上與測試環境，同時在middleware文件中對接口進行鑒權。愛掏網 - it200.com
之后在api/index.js文件中對各接口進行引用和聚合
在所有接口文件中，以announcement.js舉例：
可以看到為了實現簡便和避免過度設計，api接口沒有對數據進行重新封裝，直接進行了透傳處理。愛掏網 - it200.com
4、頁面路由
nuxt框架的頁面路由使用了vue-router，但是我們不需要對頁面的路由進行過多的操心，因為我們只要按照nuxt規范的頁面文件目錄結構進行設計，就可以自動生成vue-router文件。愛掏網 - it200.com或者說我們存放頁面的目錄結構會直接影響最終生成的路由配置。愛掏網 - it200.com
本項目的頁面目錄結構如圖所示：
而生成的router文件為：
可以看出生成的路由與pages文件夾目錄結構是一一對應的。愛掏網 - it200.com
注意：其中帶參數的動態路由，需要創建對應的下劃線作為前綴的vue文件或目錄。愛掏網 - it200.com例如圖中bidDetail/_id.vue文件，最終生成的路由即為：path: "/bidDetail/:id?"。愛掏網 - it200.com
五、總結
從頭搭建一個服務端渲染的框架其實是相當復雜的，不過有了nuxt.js后，我們可以很輕易的搭建出一個可擴展可定制的SSR框架，這大大的減少了我們搭建框架的時間成本。愛掏網 - it200.com因為nuxt的官方文檔寫的足夠詳細，我沒有對安裝這類常規項進行描述，直接從插件安裝、新概念 - layout布局、server端api、pages的組織入手，介紹了我在項目實戰中使用nuxt框架的一些關鍵路徑。愛掏網 - it200.com目前項目上線在aws跑了半個多月，總體穩定，說明雖然nuxt不是1.0版本，但是也足夠用于生產實踐了。愛掏網 - it200.com（考慮到github上說。愛掏網 - it200.comnuxt的1.0版本即將到來，我們有理由期待vue的SSR前景）
原文發布時間：2024-8-9 本文來源掘金如需轉載請緊急聯系作者