前言
筆者最近業餘時間想著學點新東西，於是開始接觸服務器端渲染（SSR），花了一週的時間學習和實戰，然後在週末高仿掘金擼了一個 SSR 的 Demo 項目。
技術棧選的是平滑開箱的 Nuxt，整個項目整合了 vue + nuxt + axios + vuex + vue-router (nuxt 自帶 vuex 和 vue-router)。
項目目前實現了以下幾大功能
服務器端渲染
靜態頁面部署
掘金首頁
掘金推薦列表
滾動分頁加載
不同端的佈局適配
一、效果圖
1、PC 端
2、移動端
看完最終完成的效果圖，接下來，開始我們的實戰之旅吧 ~
二、項目實戰
一個項目開始之前，我喜歡先搭好一個空架子。所以這裡還是老規矩，先帶著大家把項目空殼搭好吧。
1、使用 starter 模板
這裡關於項目初始化，我是直接使用的 Nuxt 官網提供的 starter 模板
訪問 http://localhost:3000 ，現在我們來看下初始化好的項目目錄
接觸過 vue 的小夥伴，看著這個目前可能會有點小疑問，為什麼沒有 router 路由相關的文件？莫慌，Nuxt 會幫你將 pages 下面的文件自動解析成路由。所以在接下來的開發中，記得別瞎在 pages 下面新增文件，pages 下面的每一個 vue 文件就是一個路由。
2、引入 axios
i. 安裝依賴
ii. 封裝 axios
為了項目之後更加方便的開發，我們有必要對 axios 進行一層封裝，我們要時刻養成這樣一種好習慣。
首先在根目錄下面新建 service 目錄，在其下面建立 config.js 和 index.js 兩個文件，下面的代碼僅供參考，如果你的項目還需要做額外的一些配置，可自行進行拓展
在 config.js 中寫入：
在 index.js 中寫入：
iii. 跨域處理
使用過 vue 的同學，肯定知道對於項目中的跨域，vue-cli 對 webpack 中的 proxy 選項進行了一層封裝。它暴露出來的是一個叫 proxyTable 的選項，是對 webpack 中的 proxy 和其三方插件 http-proxy-middleware 的一個整合。
不幸的 Nuxt 中沒有 proxyTable 這麼一個配置項來進行跨域的配置。當然幸運的是，在 Nuxt 中你可以直接通過配置 http-proxy-middleware 來處理跨域。更幸運的是 Nuxt 官方提供了兩個包來處理 axios 跨域問題。
@nuxtjs/axios
@nuxtjs/proxy
首先，進行安裝
然後在 nuxt.config.js 文件裡進行配置
這裡需要注意，因為是服務器端渲染，我們得時刻明確當前地址是屬於路由跳轉還是屬於 axios 請求。所以我們需要在 service/index.js 寫入以下判斷
然後你就可以安心使用你的 axios 進行跨域請求了
3、管理 vuex
先看下我們 store 目錄下需要的一些文件
接下來我們以此看看每個文件的內容
i. actions.js
ii. state.js
iii. mutations.js
iv. index.js
然後你就可以在頁面中進行使用了
4、全局組件管理
Nuxt 的項目不比 vue 的項目，提供了主入口文件供我們對全局組件進行配置。但要做到這個點也比較簡單，我們只需要按照 Nuxt 官網給出的規範來，將組件引入的相關配置寫入到 plugins 目錄下即可
比如，我需要引入三方組件庫 element-ui ，我們只需在 plugins 目錄下新建一個 element-ui.js 文件，並寫入
然後在 nuxt.config.js 文件中引入
最後你就可以在你的項目中使用 element-ui 組件庫裡面的組件了。
當然，你想配置自己本地的全局組件，也是一樣的做法。先在 plugins 目錄下新建一個 js 文件，然後引入你的文件，最後再在 nuxt.config.js 文件中引入即可。
5、全局樣式管理
和組件管理同理，不同的就是，css 需要存放在 assets 目錄下。比如，現在我需要有一個 main.css 文件對路由跳轉進行動態切換。
首選，你得在 assets/main.css 中寫入重置樣式吧
然後，你只要在 nuxt.config.js 進入引入即可
關於 Nuxt 更多的用法，我就不一一介紹了，詳細請參考：Nuxt.js 文檔官網
然後關於項目的具體開發，也是家常便飯了，這裡我也不展開描述了。如果想了解的，可以去 github 自行查閱。有問題的話可以加老司機群 731175396 ，然後在群裡問我即可。
接下來的篇幅，我將講一下項目部署的一些點
三、項目部署
到這一步的同學，你得先確保你擁有一個自己的服務器。如果沒有的話，感覺去買一個，現在阿里雲和騰訊雲都在搞活動，巨便宜哦 ~
OK，文章繼續。在進行部署講解前，我們先看一下 Nuxt 提供的幾個命令
1、靜態化頁面部署
我們從官網給出的文檔可以看出，部署靜態化頁面需要用到的命令是 nuxt generate ，執行的時候會在根目錄下面生成 dist 目錄，裡面的文件都是靜態化頁面需要的打包好的文件。
這裡需要特別注意的一點是，如果你的項目中存在 axios 請求的話，記得在你本地開啟一個本地服務哦 ~ 不然打包的時候執行到 axios 請求的時候會報錯。因為前面我們通過使用 node 的 process 對運行環境進行了是跳轉還是請求的判定，而打包進行請求的時候是不依賴 node 環境的
i. 使用 gh-pages
這裡，我先假設小夥伴們都可以正常執行 nuxt generate 並生成對應的 dist 目錄。
為了項目的並行開發，我們一般會在 .gitignore 文件裡面將打包文件給忽略掉，但我們靜態化頁面的部署有需要用到 dist 目錄下的所有打包文件。所以這裡我們將使用 gh-pages 將打包文件發佈到我們的 git 倉庫
然後在 package.json 寫入配置（當然你也可以新建文件執行發佈）
執行 npm run deploy ，然後你的 dist 目錄就會發到你們倉庫的 gh-pages 分支了
ii. 開始部署
打包文件上傳好之後，你需要做的第一件事就是連接好你的服務器。然後在 cd 到服務器根目錄下面，在 data/www目錄下面將你的項目 git clone 下來。然後切換到 gh-pages 分支
接下來，開始配置你的 nginx （還沒下載 nginx 的同學請自行解決）
然後重啟 nginx
然後你就能在 http://123.12.123.12:81 訪問到你部署好的靜態化頁面了
2、服務器端渲染部署
看到上面靜態化頁面部署，詳細有同學會問。進行靜態化頁面部署，豈不是沒有了服務器端渲染的優勢了。
對的，如果你的項目只是靜態頁面的話，做靜態化部署是完全 OJBK 的。但如果牽扯到請求，還是乖乖的進行服務器端的部署吧 ~
開始前，請確保你的服務器上已經搭建好了 node 環境。沒有的同學，我建議使用 nvm 安裝 node 。接下來，開始部署
i. 進行服務代理
第一步，將之前 clone 下面的 git 項目切換到主開發分支，然後為了之後的方便修改一下你的 package.json
第二步，啟動服務
第三步，配置你的 nginx 文件
最後，重新啟動 nginx 服務
ii. 使用 pm2 做進程守護
如果我們按照上面的步驟進行部署的話，服務器會經常斷掉連接，那我們的服務也就斷了。所以為了守護好我們的 nodejs 進程，這裡我將使用 pm2 對進程進行守護
首先全局安裝 pm2
然後進入到項目目錄，執行
然後，媽媽再也不用擔心我的 nodejs 進程說斷就斷啦 ~
對於 pm2 用法，請小夥伴們輸入 pm2 --help 然後自行查閱
總結
文章到這就要結束了，這裡我做一個小總結。在一週的學習和實戰中，產出一個高仿掘金的 SSR Demo 的同時，也踩了一些坑。
對於 Nuxt，在使用層面，是比較簡單、好上手的。相對 vue-ssr 來說，它大大的簡化了開發的配置，讓開發人員可以只需思考業務的開發，而不用太去擔心文件的配置。其中 Nuxt 通過監聽 pages 目錄文件變更並自動生成路由更是直接省去了我們平常對於路由的配置。
但是，目前 Nuxt 整體還是有待提高的，目前社區相關的三方插件比較有限，市面上相關的參考資料也相對比較少。
不管如何，希望 Nuxt 社區可以越來越好吧 ~
最後，想看項目源碼的小夥伴，這裡我再最後放一次鏈接
項目完整地址：nuxt-ssr-demo
關注深秀Deepshow，我們會持續為您推送編程界乾貨。每天兩篇不停歇
閱讀更多 深秀DeepShow 的文章
