最近學習了下vue ssr方面知識，學習過程爲
- 先大致過了一遍官方VUE SSR文檔,一路看下來還是有些懵逼的，跟着官方步驟下來我是沒辦法搭一個簡單的vue-ssr的demo，所以網上找了下tutorial
- 強烈推薦從0開始，搭建Vue2.0的SSR服務端渲染，跟着作者一步步搭建，可以循序漸進的理解vue ssr是怎麼實現的
- 然後就是自己回到官網，不用腳手架一步步用webpack搭建vue基礎環境，這裏主要參考vue-loader和webapck文檔，ssr方面內的配置主要參考了vue ssr官方例子hackernews的配置與實現。
先說明下采用的各個主要package的版本如下：
- vue 2.5.21
- vue-server-renderer 2.5.21
- webpack 4.27.1
- vue-loader 15.4.2
然後分享下學習中碰到的問題，具體搭建和學習參見demo和上面步驟2文章鏈接，作者寫的很好。
- 終端代理設置
在我把官方hackerners的例子下下來，裝好依賴跑起來，控制檯顯示成功了，但是代開瀏覽器，卻一直不顯示頁面，後來在issue中查到，你運行的Terminal需要翻牆，具體可以見issue。這裏是解決問題，但是後面自己的demo用axios請求出了問題，自己mock的一些數據在瀏覽器中輸入http://localhost:3000/api/user是可以出來數據的，但是起的服務卻老是出錯，後來查到因爲我設置了終端的proxy，axios會自動檢測到並使用他，所以他請求的url一直是，所以遇到一個連環問題，解決的話參考axios這個issue去掉終端的proxy
- document is not defined
服務器環境是沒有document的，webpack如果用了MiniCssExtractPlugin會提取css會用到document，所以在服務器端的webpack配置中需要去掉，這一部分參考了這篇文章，也可以參考我的webpack配置看一看 - css 打包不到一個文件
webpack4中使用splitchunks這個配置來優化和做緩存策略，然而我怎麼配置都css文件不會被打包成一個，搜索了很久終於看到MiniCssExtractPlugin的issue中解決
，這樣就打包到一個css文件，後來持續關注到知道這是webpack的一個bug。
- 開發環境熱重載
這裏我用的是官方的方法，照抄過來的[逃:)]，基本原來我覺得應該就是利用webpack-hot-middleware和webpack-dev-middleware來實現的，因爲webpack-dev-middleware是一個express中間件，它實現fs基於內存，提高了編譯讀取速度；然後通過watch文件的變化，動態編譯
