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中代理的方式进行通信
以上两种方式,不管使用哪种,最终的原理都是将被加载工程中所有资源加载到调用的工程中,区别就是是否使用了服务器代理。
