基于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高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
理解javascript定时器中的setTimeout与setInterval
Feb 23 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
express 项目分层实践详解
Dec 10 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 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/10/09 PHP
E路文章系统PHP
2006/12/11 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
浅谈js中的闭包
2015/03/16 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
浅谈Python里面小数点精度的控制
2018/07/16 Python
详解Python locals()的陷阱
2019/03/26 Python
python 实现矩阵填充0的例子
2019/11/29 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
毕业生物理教师求职信
2013/10/17 职场文书
企业标语口号
2014/06/10 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
大学生创业计划书
2014/08/14 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
超市工作总结范文2014
2014/12/19 职场文书
演讲比赛主持词
2015/06/29 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书