基于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 相关文章推荐
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
如何实现js拖拽效果及原理解析
May 08 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安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
python实现数独算法实例
2015/06/09 Python
python在不同层级目录import模块的方法
2016/01/31 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python发展史及网络爬虫
2019/06/19 Python
详解python调用cmd命令三种方法
2019/07/08 Python
为什么说python适合写爬虫
2020/06/11 Python
宝信软件JAVA工程师面试经历
2012/08/19 面试题
专升本个人自我评价
2013/12/22 职场文书
医院总经理职责
2013/12/26 职场文书
学术会议主持词
2014/03/17 职场文书
人事专员岗位说明书
2014/07/29 职场文书
商场父亲节活动方案
2014/08/27 职场文书
费用申请报告范文
2015/05/15 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
python Tkinter模块使用方法详解
2022/04/07 Python