基于Vue CSR的微前端实现方案实践
106 浏览量
2020-10-15
06:48:17
上传
评论
收藏 101KB PDF 举报
基于基于Vue CSR的微前端实现方案实践的微前端实现方案实践
主要介绍了基于Vue CSR的微前端实现方案实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作
具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在这里就不讲微前端的各种优缺点，直接假设你在负责一个中后台管理系统的开发，所有的业务模块全部都在一个项目中打
包，随着业务量的不断增长，编译越来越慢，你期望可以从老的项目中将新的业务进行独立开发、独立部署，以微应用的形式
嵌入到老项目中。
本篇文章的受众是那些希望在新老的项目中，在不需要你对老项目进行改动老项目的前提下，嵌入微应用，如果本篇文章对你
有帮助，请点个:+1:！
核心要素核心要素
构建生产环境代码，输出远程组件所需的 JSON
通过 ajax 请求，拿到这个 JSON 的数据，传给 远程组件
新项目的搭建新项目的搭建
对于项目的搭建，在这里就不再仔细的展开讲了，大家直接看 Genesis 项目快速开始的文档吧
修改编译代码
import path from 'path';
import fs from 'fs';
import { Build } from '@fmfe/genesis-compiler';
import { ssr } from './genesis';
const start = async () => {
/**
* 创建一个编译实例
*/
const build = new Build(ssr);
/**
* 开始执行编译程序，构建生产环境应用包
*/
await build.start();
/**
* 编译完成后，创建一个渲染器，输出远程组件所需的内容
*/
const renderer = ssr.createRenderer();
/**
* CSR 渲染输出 JSON
*/
const result = await renderer.render({ mode: 'csr-json' });
/**
* 将 JSON 保存到客户端目录
*/
fs.writeFileSync(
path.resolve(ssr.outputDirInClient, 'app.json'),
JSON.stringify(result.data, null, 4),
'utf8'
);
};
start();
如果你是根据官方文档来走的话，你只需要自己修改一下 genesis.build.ts 文件即可。如果你自定义了文件名，只要在 await
build.start() 方法执行完成后，创建一个渲染器，将 CSR 的渲染结果保存到一个 JSON 文件即可。
编译完成后，你得到的大概是这样的一个文件
资源评论
