基于Vue CSR的微前端实现方案实践


Posted in Javascript onMay 27, 2020

在这里就不讲微前端的各种优缺点,直接假设你在负责一个中后台管理系统的开发,所有的业务模块全部都在一个项目中打包,随着业务量的不断增长,编译越来越慢,你期望可以从老的项目中将新的业务进行独立开发、独立部署,以微应用的形式嵌入到老项目中。

本篇文章的受众是那些希望在新老的项目中,在不需要你对老项目进行改动老项目的前提下,嵌入微应用,如果本篇文章对你有帮助,请点个:+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 文件即可。

编译完成后,你得到的大概是这样的一个文件

基于Vue CSR的微前端实现方案实践 

你只需要将 client

目录的静态文件部署到你的服务器即可。

老项目远程组件加载

假设你的静态资源的基本路径是 /ssr-genesis/ ,那么你就可以通过 /ssr-genesis/app.json 访问到这个文件。

在你的老项目上安装远程组件

npm install @fmfe/genesis-remote axios

在你对应的路由上,使用远程组件,加载此组件即可。

<template>
 <div class="app">
  <RemoteView :fetch="fetch" />
 </div>
</template>
<script lang="ts">
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;
  }
 }
});
</script>

多历史模式的支持

如果你老项目使用历史模式,在子应用也使用历史模式,会导致 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 目录部署到服务器。

总结

Genesis 只是一个 Vue SSR 的渲染库,它不是框架,它只是给你提供了最基础的 SSR 渲染能力。

到此这篇关于基于Vue CSR的微前端实现方案实践的文章就介绍到这了,更多相关Vue CSR微前端内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
Javascript结合css实现网页换肤功能
Nov 02 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 #Javascript
jQuery实现鼠标滑动切换图片
May 27 #jQuery
js验证账户名是否重复
May 26 #Javascript
小程序富文本提取图片可放大缩小
May 26 #Javascript
微信小程序自定义联系人弹窗
May 26 #Javascript
微信小程序单选框自定义赋值
May 26 #Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 #Javascript
You might like
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Python 如何对文件目录操作
2020/07/10 Python
python关于倒排列的知识点总结
2020/10/13 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
Hotels.com南非:酒店预订
2017/11/02 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
迎八一活动主题
2014/01/31 职场文书
新学期决心书
2014/03/11 职场文书
销售总经理岗位职责
2014/03/15 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
医院合作协议书
2014/08/19 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
大学开学感言
2015/08/01 职场文书
Springboot中如何自动转JSON输出
2022/06/16 Java/Android