基于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实现的激活输入框后隐藏初始内容
Jun 29 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
24个ES6方法解决JS实际开发问题(小结)
May 31 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
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
深入php内核之php in array
2015/11/10 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
Node.js模块加载详解
2014/08/16 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
python实现猜数游戏
2020/03/27 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
个人授权委托书
2014/09/15 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
单位介绍信格式
2015/01/31 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
党小组意见范文
2015/06/08 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript