vue服務端渲染 (將vue-cli生成的項目轉爲ssr)

目錄結構

-no-ssr-demo 未作ssr以前的項目代碼用於對比

-vuecli2ssr 將vuecli生成的項目轉爲ssr

-prerender-demo 使用prerender-spa-plugin 的預渲染demo

-readme-images readme文件的幾個圖片

ssr是什麼

服務器端將Vue組件直接渲染未html字符串,發送至瀏覽器,最後在瀏覽器中混合爲可交互的應用程序

服務器渲染的 Vue.js 應用程序也能夠被認爲是"同構"或"通用"，由於應用程序的大部分代碼均可以在服務器和客戶端上運行。

爲何要用

• 更好的 SEO

• 更快的內容到達時間(time-to-content)

怎麼作

• vue-server-renderer

• Nuxt.js

是一個參考了 React.js 棧下的 Next.js 的一個更高封裝接口的 SSR 框架。它封裝了一層和 vue-router、vuex 及 webpack 設置這一層需求，能夠快速開發 SSR.

• Prerendering

若是你調研服務器端渲染(SSR)只是用來改善少數營銷頁面（例如 /, /about, /contact 等）的 SEO，那麼你可能須要預渲染。無需使用 web 服務器 實時動態編譯 HTML，而是使用預渲染方式，在構建時(build time)簡單地生成針對特定路由的靜態 HTML 文件。優勢是設置預渲染更簡單，並能夠將你 的前端做爲一個徹底靜態的站點。 若是你使用 webpack，你可使用 prerender-spa-plugin 輕鬆地添加預渲染。

缺點

• 開發條件所限。瀏覽器特定的代碼，只能在某些生命週期鉤子函數(lifecycle hook)中使用；一些外部擴展庫(external library)可能須要特殊處理， 才能在服務器渲染應用程序中運行。

• 涉及構建設置和部署的更多要求。與能夠部署在任何靜態文件服務器上的徹底靜態單頁面應用程序(SPA)不一樣，服務器渲染應用程序，須要處於 Node.js server 運行環境。

• 更多的服務器端負載。在 Node.js 中渲染完整的應用程序，顯然會比僅僅提供靜態文件的 server 更加大量佔用 CPU 資源(CPU-intensive - CPU 密集)，所以若是你預料在高流量環境(high traffic)下使用，請準備相應的服務器負載，並明智地採用緩存策略。

注意事項

• 若是你打算爲你的vue項目在node使用 SSR，那麼在通用代碼中，咱們有必要而且須要遵照下面的這些約定：

• 通用代碼: 在客戶端與服務器端都會運行的部分爲通用代碼。

• 注意服務端只調用beforeCreat與created兩個鉤子，因此不能夠作相似於在created初始化一個定時器，而後在mounted或者destroyed銷燬這個定時 器，否則服務器會慢慢的被這些定時器給榨乾了因單線程的機制，在服務器端渲染時，過程當中有相似於單例的操做，那麼全部的請求都會共享這個單例的操做，因此應該使用工廠函數來確保每一個請求之間的獨立性。

• 若有在beforeCreat與created鉤子中使用第三方的API，須要確保該類API在node端運行時不會出現錯誤，好比在created鉤子中初始化一個數據請求 的操做，這是正常而且及其合理的作法。但若是隻單純的使用XHR去操做，那在node端渲染時就出現問題了，因此應該採起axios這種瀏覽器端與服務器端 都支持的第三方庫。

• 最重要一點: 切勿在通用代碼中使用document這種只在瀏覽器端能夠運行的API，反過來也不可使用只在node端能夠運行的API。

疑惑

如何與中間層結合

結構預覽

圖片見github

實現過程

圖片見github

應用

坑

1. UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 30): Error: connect ECONNREFUSED 127.0.0.1:80

控制檯拋 uncaught ，這是多麼貼心的功能。之前都是默默吃掉這個異常的，在一個項目裏 debug 簡直醉人。

https://www.zhihu.com/question/40876687/answer/88627772

2.http-proxy-middleware connect ECONNREFUSED 127.0.0.1:80

解決方法 １. 將node服務器端口改爲 127.0.0.1:80 2. 將接口服務器端口改爲 127.0.0.1:80 3. 將asyncData方法使用的請求url加上域名+端口，以下所示

export default {
  asyncData ({ params }) {
    return axios.get(`https://127.0.0.1:3000/api/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
  }
}
複製代碼

參考: Nuxt ServerError connect ECONNREFUSED 127.0.0.1:80 錯誤解決

3.axios 將post請求數據轉爲formdata

axios({
            url: '/api/index/getIndexlbt',
            method: 'post',
            data: {
              relevanceId:this.$route.params.id,
              pictureType:4
            },
            transformRequest: [function (data) {
              let ret = ''
              for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
              }
              return ret
            }],
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })
複製代碼

4.Computed property "currentPage" was assigned to but it has no setter

// currentPage () {
            // return store.state.currentPage
            // }

            currentPage: {
                get: function () {
                    return store.state.currentPage
                },
                set: function () {
                }
            }
複製代碼

https://segmentfault.com/q/1010000010358438/a-1020000010358925 https://github.com/ElemeFE/mint-ui/issues/1000

5.vuex 的dispatch和commit提交mutation的區別

很簡單，一個異步操做與同步操做的區別。

當你的操做行爲中含有異步操做，好比向後臺發送請求獲取數據，就須要使用action的dispatch去完成了。
其餘使用commit便可。
複製代碼

vue中更改state的值

參考資料

官方資料

vue-ssr

ssr適合多頁 仍是 單頁

https://github.com/vuejs/vue-hackernews-2.0/issues/187#issuecomment-303688734\

https://github.com/hilongjw/vue-ssr-hmr-template/issues/4

理解ssr

簡單的 Vue SSR Demo

Vue項目SSR改造實戰

從零開始搭建vue-ssr系列之二：Client端渲染以及webpack2+vue2踩坑之旅

從零開始搭建vue-ssr系列之三：服務器渲染的奧祕

好文推薦

Vue項目SSR改造實戰 可參考性比較強

史上最詳細易懂的vue服務端渲染（ssr）教程 能夠簡單理解,對於後期搭建好想沒啥大用

讓vue-cli初始化後的項目集成支持SSR

vue-hackernews-2.0 源碼解讀 對項目總體結構說明,能夠結合官方demo查看更佳

Vue 全站服務器渲染 SSR 實踐

詳解 Vue & Vuex 實踐 掘金的項目實戰

vuex

官方文檔：

vuex action介紹

vuex2-demo demo不錯

vuex-demo

可參考的demo

官方demo 官方demo,大而全,存在接口牆的問題

vnews 解決官方demo沒法訪問的問題, 功能相似vue-hackernews-2.0, 只不過內容源換成掘金網站，於是沒法使用service worker的push功能。

Beauty 據說挺好,可是沒有嘗試

其餘

mmf-blog vuejs 2.0 服務端渲染 v2版

vue-cnode-mobile

問題:

1. 組件的異步加載模式,2.router,store爲何要改爲 異步

應用程序的代碼分割或惰性加載，有助於減小瀏覽器在初始渲染中下載的資源體積，能夠極大地改善大致積 bundle 的可交互時間 (TTI - time-to-interactive)。這裏的關鍵在於，對初始首屏而言，"只加載所需"。

2. 如何不跳轉頁面 驗證異步路由的優點

3. 10次測試時間對比

4. 每一個開發人員都要配置ssr環境

5. 單頁面多頁面結構

6. 怎麼跟中間層結合

源碼

項目總體

no-ssr-demo

vuecli2ssr

prerender-demo

有幫助請點個star!