vue服務(wù)端渲染demo將vue-cli生成的項(xiàng)目轉(zhuǎn)為ssr

whinc 發(fā)布于2019-08-22 16:07 / 2109人閱讀

摘要：無需使用服務(wù)器實(shí)時(shí)動態(tài)編譯，而是使用預(yù)渲染方式，在構(gòu)建時(shí)簡單地生成針對特定路由的靜態(tài)文件。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序不同，服務(wù)器渲染應(yīng)用程序，需要處于運(yùn)行環(huán)境。更多的服務(wù)器端負(fù)載。

目錄結(jié)構(gòu)

-no-ssr-demo 未做ssr之前的項(xiàng)目代碼用于對比

-vuecli2ssr 將vuecli生成的項(xiàng)目轉(zhuǎn)為ssr

-prerender-demo 使用prerender-spa-plugin 的預(yù)渲染demo

-readme-images readme文件的幾個(gè)圖片

ssr是什么

服務(wù)器端將Vue組件直接渲染未html字符串,發(fā)送至瀏覽器,最后在瀏覽器中混合為可交互的應(yīng)用程序

服務(wù)器渲染的 Vue.js 應(yīng)用程序也可以被認(rèn)為是"同構(gòu)"或"通用"，因?yàn)閼?yīng)用程序的大部分代碼都可以在服務(wù)器和客戶端上運(yùn)行。

為什么要用

更好的 SEO

更快的內(nèi)容到達(dá)時(shí)間(time-to-content)

怎么做

vue-server-renderer

Nuxt.js

是一個(gè)參考了 React.js 棧下的 Next.js 的一個(gè)更高封裝接口的 SSR 框架。它封裝了一層和 vue-router、vuex 及 webpack 設(shè)置這一層需求，可以快速開發(fā) SSR.

Prerendering

如果你調(diào)研服務(wù)器端渲染(SSR)只是用來改善少數(shù)營銷頁面（例如 /, /about, /contact 等）的 SEO，那么你可能需要預(yù)渲染。無需使用 web 服務(wù)器
實(shí)時(shí)動態(tài)編譯 HTML，而是使用預(yù)渲染方式，在構(gòu)建時(shí)(build time)簡單地生成針對特定路由的靜態(tài) HTML 文件。優(yōu)點(diǎn)是設(shè)置預(yù)渲染更簡單，并可以將你
的前端作為一個(gè)完全靜態(tài)的站點(diǎn)。
如果你使用 webpack，你可以使用 prerender-spa-plugin 輕松地添加預(yù)渲染。

缺點(diǎn)

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

才能在服務(wù)器渲染應(yīng)用程序中運(yùn)行。

涉及構(gòu)建設(shè)置和部署的更多要求。與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序(SPA)不同，服務(wù)器渲染應(yīng)用程序，需要處于
Node.js server 運(yùn)行環(huán)境。

更多的服務(wù)器端負(fù)載。在 Node.js 中渲染完整的應(yīng)用程序，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用
CPU 資源(CPU-intensive - CPU 密集)，因此如果你預(yù)料在高流量環(huán)境(high traffic)下使用，請準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載，并明智地采用緩存策略。

注意事項(xiàng)

如果你打算為你的vue項(xiàng)目在node使用 SSR，那么在通用代碼中，我們有必要并且需要遵守下面的這些約定：

通用代碼: 在客戶端與服務(wù)器端都會運(yùn)行的部分為通用代碼。

注意服務(wù)端只調(diào)用beforeCreat與created兩個(gè)鉤子，所以不可以做類似于在created初始化一個(gè)定時(shí)器，然后在mounted或者destroyed銷毀這個(gè)定時(shí)

器，不然服務(wù)器會慢慢的被這些定時(shí)器給榨干了因單線程的機(jī)制，在服務(wù)器端渲染時(shí)，過程中有類似于單例的操作，那么所有的請求都會共享這個(gè)單例的操作，所以應(yīng)該使用工廠函數(shù)來確保每個(gè)請求之間的獨(dú)立性。

如有在beforeCreat與created鉤子中使用第三方的API，需要確保該類API在node端運(yùn)行時(shí)不會出現(xiàn)錯誤，比如在created鉤子中初始化一個(gè)數(shù)據(jù)請求

的操作，這是正常并且及其合理的做法。但如果只單純的使用XHR去操作，那在node端渲染時(shí)就出現(xiàn)問題了，所以應(yīng)該采取axios這種瀏覽器端與服務(wù)器端
都支持的第三方庫。

最重要一點(diǎn): 切勿在通用代碼中使用document這種只在瀏覽器端可以運(yùn)行的API，反過來也不可以使用只在node端可以運(yùn)行的API。

疑惑

如何與中間層結(jié)合

結(jié)構(gòu)預(yù)覽

圖片見github

實(shí)現(xiàn)過程

圖片見github

應(yīng)用 坑

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

控制臺拋 uncaught ，這是多么貼心的功能。以前都是默默吃掉這個(gè)異常的，在一個(gè)項(xiàng)目里 debug 簡直醉人。

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

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

解決方法
１. 將node服務(wù)器端口改成　127.0.0.1:80

將接口服務(wù)器端口改成　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請求數(shù)據(jù)轉(zhuǎn)為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的區(qū)別

很簡單，一個(gè)異步操作與同步操作的區(qū)別。

當(dāng)你的操作行為中含有異步操作，比如向后臺發(fā)送請求獲取數(shù)據(jù)，就需要使用action的dispatch去完成了。
其他使用commit即可。

vue中更改state的值

參考資料 官方資料

vue-ssr

ssr適合多頁還是單頁

https://github.com/vuejs/vue-...

https://github.com/hilongjw/v...

理解ssr

簡單的 Vue SSR Demo

Vue項(xiàng)目SSR改造實(shí)戰(zhàn)

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

從零開始搭建vue-ssr系列之三：服務(wù)器渲染的奧秘

好文推薦

Vue項(xiàng)目SSR改造實(shí)戰(zhàn) 可參考性比較強(qiáng)

史上最詳細(xì)易懂的vue服務(wù)端渲染（ssr）教程可以簡單理解,對于后期搭建好想沒啥大用

讓vue-cli初始化后的項(xiàng)目集成支持SSR

vue-hackernews-2.0 源碼解讀對項(xiàng)目整體結(jié)構(gòu)說明,可以結(jié)合官方demo查看更佳

Vue 全站服務(wù)器渲染 SSR 實(shí)踐

詳解 Vue & Vuex 實(shí)踐掘金的項(xiàng)目實(shí)戰(zhàn)

vuex

官方文檔：

vuex action介紹

vuex2-demo demo不錯

vuex-demo

可參考的demo

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

vnews 解決官方demo無法訪問的問題, 功能類似vue-hackernews-2.0, 只不過內(nèi)容源換成掘金網(wǎng)站，因而無法使用service worker的push功能。

Beauty 聽說挺好,但是沒有嘗試

其他

mmf-blog vuejs 2.0 服務(wù)端渲染 v2版

vue-cnode-mobile

問題:

組件的異步加載模式,2.router,store為什么要改成異步

應(yīng)用程序的代碼分割或惰性加載，有助于減少瀏覽器在初始渲染中下載的資源體積，可以極大地改善大體積 bundle 的可交互時(shí)間 (TTI - time-to-interactive)。這里的關(guān)鍵在于，對初始首屏而言，"只加載所需"。

如何不跳轉(zhuǎn)頁面驗(yàn)證異步路由的優(yōu)勢

10次測試時(shí)間對比

每個(gè)開發(fā)人員都要配置ssr環(huán)境

單頁面多頁面結(jié)構(gòu)

怎么跟中間層結(jié)合

源碼

項(xiàng)目整體

no-ssr-demo

vuecli2ssr

prerender-demo

有幫助請點(diǎn)個(gè)star!

云服務(wù)器 GPU云服務(wù)器 vue-cli vue-cli3 將html轉(zhuǎn)為dom js將轉(zhuǎn)為二進(jìn)制

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94065.html

發(fā)表評論

登陸后可評論

0條評論

whinc

男|高級講師

我要關(guān)注我要私信

TA的文章

【微信開發(fā)】SpringBoot 集成微信小程序授權(quán)登錄

閱讀 3838·2021-11-12 10:34
主機(jī)空間默認(rèn)首頁文件是什么-虛擬主機(jī)中的默認(rèn)首頁是什么？

閱讀 2840·2021-09-22 15:14
總結(jié)一下各種0.5px的線

閱讀 810·2019-08-30 15:53
怎么實(shí)現(xiàn)微信聊天時(shí)的氣泡圖（一）

閱讀 3223·2019-08-30 12:53
Css-移動端適配總結(jié)

閱讀 1310·2019-08-29 18:32
css3 新特性

閱讀 2793·2019-08-29 16:41
Js-函數(shù)式編程

閱讀 1092·2019-08-26 13:40
通過拖動列表，重新獲取列表的排序

閱讀 1838·2019-08-23 18:07

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vue服務(wù)端渲染demo將vue-cli生成的項(xiàng)目轉(zhuǎn)為ssr

相關(guān)文章

**php，vue，vue-ssr 做出來的頁面有什么區(qū)別？**

**php，vue，vue-ssr 做出來的頁面有什么區(qū)別？**

**手把手教你搭建SSR(vue/vue-cli + express)**

**從零開始搭建一個(gè)vue-ssr（下）**

**從零開始搭建一個(gè)vue-ssr（上）**

發(fā)表評論

0條評論

whinc

男|高級講師

TA的文章

【微信開發(fā)】SpringBoot 集成微信小程序授權(quán)登錄

主機(jī)空間默認(rèn)首頁文件是什么-虛擬主機(jī)中的默認(rèn)首頁是什么？

總結(jié)一下各種0.5px的線

怎么實(shí)現(xiàn)微信聊天時(shí)的氣泡圖（一）

Css-移動端適配總結(jié)

css3 新特性

Js-函數(shù)式編程

通過拖動列表，重新獲取列表的排序

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vue服務(wù)端渲染demo將vue-cli生成的項(xiàng)目轉(zhuǎn)為ssr

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！