1. 程式人生 > >[FE] 有效開展一個前端專案3 (Vue CLI / Vue SSR )

[FE] 有效開展一個前端專案3 (Vue CLI / Vue SSR )

關於如何有效開展一個前端專案,部落格之前已有兩篇如下:

[FE] 有效開展一個前端專案1 (gulp/angular) [FE] 有效開展一個前端專案2 (vuejs-templates/webpack)

 

一些元件已經是過去式,但 Nodejs、Webpack 依舊再用,Vuejs、Vuex、Vue-router、vue-devtools 依舊再用。 

 

記得 gulp 和 angular 已經是 2015~2016 的事,有了 webpack 和 react、Vuejs 之後新專案都已經擇新使用。

 

vuejs-templates 是 2017~2018 的事,並且該專案自己的說明中已經不推薦使用,而是推薦了 Vue CLI 來建立新專案。

 

我們知道 Vuejs 的特點是提供了簡單好用的方式來建立 SPA 應用,它在這一領域屬於佼佼者。

 

但是很多 Web 站點,要面對的是既想使用 Vuejs 和 npm 生態帶來的便利,又想兼顧 SEO,那麼此時就剩下唯一的選擇了:Vue SSR

 

這裡我們分析一下,為什麼不選擇後端直接渲染的方式,如果是個人部落格類的站點其實影響不大。

 

但是商業專案要考慮 ①可維護性,那麼當然前後端分離,人員分工明確,是比較適合的選擇。

 

還要考慮 ②可擴充套件性,那麼前端頁面可以完全放到 CDN 上,後端純介面更易於優化和擴充套件。

 

另外就是 ③後端複用性,同一個介面,客戶端可以是 Web,H5,App,大大減少了前期後端投入。

 

關於 Vue CLI 去使用一下就可以瞭解大致的選項,下面是我選擇的一些,基本是全配置型:

 

關於 Vue SSR,思想就是在啟動的 Node Server 中,每次請求來都例項化 Vue,內容渲染成字元再響應給瀏覽器,

額外有一些使用禁忌需要注意,Nodejs 環境不同於瀏覽器,沒有 DOM、Window 物件。

 

這裡再提一下 Prerender,它不需要單獨的 Node Server ,成本小,頁面不多也不需要動態搜尋的可以考慮這種預生成方式。

 

其他支援 JS 渲染引擎的後端也可以做 SSR,但是有點捨近求遠,免不了要用JS,那麼用 PHPV8js 輸出就不如直接交給 Node 了。 

 

Link:https://www.cnblogs.com/farwish/p/11565563.ht