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

時間 2019-11-08

標籤 vue 服務渲染 demo cli 生成項目轉爲 ssr 简体版

原文原文鏈接

目錄結構

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

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

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

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

ssr是什麼

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

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

爲何要用

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

怎麼作

vue-server-renderer
Nuxt.js

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

Prerendering

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

缺點

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

才能在服務器渲染應用程序中運行。web

涉及構建設置和部署的更多要求。與能夠部署在任何靜態文件服務器上的徹底靜態單頁面應用程序(SPA)不一樣，服務器渲染應用程序，須要處於
Node.js server 運行環境。
更多的服務器端負載。在 Node.js 中渲染完整的應用程序，顯然會比僅僅提供靜態文件的 server 更加大量佔用
CPU 資源(CPU-intensive - CPU 密集)，所以若是你預料在高流量環境(high traffic)下使用，請準備相應的服務器負載，並明智地採用緩存策略。

注意事項

若是你打算爲你的vue項目在node使用 SSR，那麼在通用代碼中，咱們有必要而且須要遵照下面的這些約定：
通用代碼: 在客戶端與服務器端都會運行的部分爲通用代碼。
注意服務端只調用beforeCreat與created兩個鉤子，因此不能夠作相似於在created初始化一個定時器，而後在mounted或者destroyed銷燬這個定時

器，否則服務器會慢慢的被這些定時器給榨乾了因單線程的機制，在服務器端渲染時，過程當中有相似於單例的操做，那麼全部的請求都會共享這個單例的操做，因此應該使用工廠函數來確保每一個請求之間的獨立性。vue-router

若有在beforeCreat與created鉤子中使用第三方的API，須要確保該類API在node端運行時不會出現錯誤，好比在created鉤子中初始化一個數據請求

的操做，這是正常而且及其合理的作法。但若是隻單純的使用XHR去操做，那在node端渲染時就出現問題了，因此應該採起axios這種瀏覽器端與服務器端
都支持的第三方庫。

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

疑惑

如何與中間層結合

結構預覽

圖片見github

實現過程

圖片見github

應用

坑

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

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

https://www.zhihu.com/questio...

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

解決方法
１. 將node服務器端口改爲　127.0.0.1:80

將接口服務器端口改爲　127.0.0.1:80
將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/10...
https://github.com/ElemeFE/mi...

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

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

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

vue中更改state的值

參考資料

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

問題:

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

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

如何不跳轉頁面驗證異步路由的優點
10次測試時間對比
每一個開發人員都要配置ssr環境
單頁面多頁面結構
怎麼跟中間層結合

源碼

有幫助請點個star!

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

目錄結構

ssr是什麼

爲何要用

怎麼作

缺點

注意事項

疑惑

結構預覽

實現過程

應用

坑

參考資料

官方資料

ssr適合多頁 仍是 單頁

理解ssr

好文推薦

vuex

可參考的demo

其餘

源碼

ssr適合多頁仍是單頁