Vue.js是一套构建用户界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件,本文就来为大家介绍基于Vue CSR实现微前端的方法。
核心要素构建生产环境代码,输出远程组件所需的 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 文件即可。
编译完成后,你得到的大概是这样的一个文件
你只需要将 client 目录的静态文件部署到你的服务器即可。
老项目远程组件加载
假设你的静态资源的基本路径是 /ssr-genesis/,那么你就可以通过 /ssr-genesis/app.json 访问到这个文件。
在你的老项目上安装远程组件npm install @fmfe/genesis-remote axios
在你对应的路由上,使用远程组件,加载此组件即可。
import Vue from 'vue';
import axios from 'axios';
import { RemoteView } from '@fmfe/genesis-remote';
export default Vue.extend({
components: {
RemoteView
},
methods: {
async fetch() {
const res = await axios.get('/ssr-genesis/app.json');
if (res.status === 200) {
return res.data;
}
return null;
}
}
});
多历史模式的支持
如果你老项目使用历史模式,在子应用也使用历史模式,会导致 router.push('/xxx') 产生多条历史记录,为了解决这个问题,你可以在子应用使用 abstract 模式,或者使用 @fmfe/genesis-app 帮你处理多个 Router 实例使用历史模式产生的BUG,注意,你需要在新老项目一起使用 @fmfe/genesis-app 包装后的 Router
拓展/**
* CSR 渲染输出 HTML
*/
const result = await renderer.render({ mode: 'csr-html' });
/**
* 将 html 保存到客户端目录
*/
fs.writeFileSync(
path.resolve(ssr.outputDirInClient, 'index.html'),
result.data
'utf8'
);
如果你仅仅只是想做 CSR 的项目,只需要渲染出 html 即可,和平常的 CSR 项目一样,将 client 目录部署到服务器。
更多前端开发学习知识,请关注HTML中文网