Vue-genesis
（一）介紹
官網地址: https://fmfe.github.io/genesis-docs/
genesis是一個輕量級的Vue SSR插件,不與任何框架進行綁定,但目前來說是基於vue框架,也不與任何一個node服務器進行綁定,但一般來說,node服務器優先選擇express。概括性的說,它起到一個服務端聚合,客戶端一鍵拆分打包的功效。什么是服務端聚合,即將所有子工程聚合到一起,在node環境一鍵啟動,這樣可以避免多次單獨啟動一個子工程。什么是客戶端一鍵拆分,即通過一個命令就能將所有子工程打包並部署到生產環境。那么子工程是怎么進行通信的呢,客觀的來說,就是通過創建script標簽,link標簽,style標簽等等,動態的將一個工程所有的資源加載到另外一個工程下。那么問題又來了,是不是每次請求其他工程的資源時,都要重新加載呢,這樣子,如果被加載工程資源太大時,豈不是很慢,顧名思義,這種猜想是不對的,資源只會被加載一次,第二次請求時,不會再去加載資源。
（二）依賴包
@fmfe/genesis-app(包裝了vue-router,動態創建項目入口文件App,並還可以解決歷史模式下,多個Router實例沖突的問題。每個子工程都有Router實例。)
授信模塊如何加載客戶模塊的詳情資源呢?首先,授信模塊通過遠程請求將客戶模塊中所有的資源(css,js)加載到自己工程下,那么界面怎么渲染呢,如何讓界面展示的內容就是自己想看到的內容呢,顧名思義,就是通過@fmfe/genesis-app進行動態創建項目入口文件app,來進行渲染,其實通俗的講,就是將地址欄的URL匹配到加載工程中已配置路由所對應的組件並進行渲染展示。
@fmfe/genesis-compiler(一個編譯包,用於開發的依賴包,主要用於配置打包文件的輸出位置以及其他配置信息)
@fmfe/genesis-core(核心庫,用於生成打包資源文件)
@fmfe/genesis-remote(解析遠程組件)
當加載其它工程資源時,實際加載出來的是一個json文件,通過@fmfe/genesis-remote將json文件進行解析,動態創建script標簽,style標簽等插入根節點(document)下。
ts-node(用於在node環境運行ts)
（三）生產環境部署
一個完整的打包后的json文件
以上只是生產環境部署中的一種方式。
第一種方式:所有的子工程部署在同一個服務器同一個端口號下
第二中方式:所有的子工程部署在不同的服務器不同的端口下,通過express中代理的方式進行通信
以上兩種方式,不管使用哪種,最終的原理都是將被加載工程中所有資源加載到調用的工程中,區別就是是否使用了服務器代理。
