vue为基座微前端嵌入html,使用Vue CSR的微前端实现方案实践
在这里就不讲微前端的种种优缺点,直接假设你在负责一个中后台管理系统的开发,所有的业务模块全部都在一个项目中打包,随着业务量的不断增长,编译越来越慢,你期望可以从老的项目中将新版的业务进行独立开发、独立部署,以微应用的形式嵌入到老项目中。
本篇文章的受众是那些希望在新版老的项目中,在不需要你对老项目进行改动老项目的前提下,嵌入微应用,如果本篇文章对你有帮助,请点个:+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 文件就行了。
编译完成后,你得到的大概是这样的一个文件
你只需要将 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 目录部署到服务器。
总结
Genesis 只是一个 Vue SSR 的渲染库,它不是框架,它只是给你提供了最基础的 SSR 渲染能力。
到此这篇关于使用Vue CSR的微前端实现方案实践的文章就简介到这了,更多相关Vue CSR微前端内容请搜索乐购源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持乐购源码!
vue为基座微前端嵌入html,使用Vue CSR的微前端实现方案实践相关推荐
- 干货 | 前端智能化探索,骨架屏低代码自动生成方案实践
作者简介 ZiLin Wang,前端开发者,函数式编程爱好者,最近沉迷于低代码平台和WebAssembly:Ivan Zhang,擅长前端打杂,最近专注于Sketch插件和DesignOps平台:Sh ...
- 微前端(一)微前端是什么?为什么要用微前端?
微前端是什么? 参考网站: https://micro-frontends.org https://microfrontends.com 微前端就是与多个可以独立发布功能的团队一起构建现代化web应用 ...
- vue computed使用_前端发展方向指南—Vue运行机制
点击上方蓝色字关注我们~01前言随着这几年前端的快速发展,页面中需要实现的功能越来越复杂,DOM操作频繁,使用传统的jQuery库去频繁操作DOM时不仅消耗性能,而且各种DOM绑定后期维护时简直是一场 ...
- 前端面试总结(vue篇)
vue的优点 vue是个轻量级的框架,是一个构建数据的视图集合,大小只有几十Kb vue是组件化开发,适合多人开发 vue中的双向数据绑定更方便操作表单数据 因为vue是MVVM的框架,视图,数据,结 ...
- 前端知识基础之Vue知识点串讲
一.Vue知识点串讲 复习一下Vue中的核心知识点. 复习完基本的知识点以后,后面再来看一下其它的面试内容 1.基本使用 下面,先来看一段最简单的代码,如下所示: <!DOCTYPE html& ...
- 微前端解决方案初探 01 微前端介绍、价值、如何实现、systemjs 模块化方案
什么是微前端 微前端是一种软件架构,可以将前端应用拆解成一些更小的能够独立开发部署的微型应用,然后再将这些微应用进行组合使其成为整体应用的架构模式. 微前端架构类似于组件架构,但不同的是,组件不能独立 ...
- 前端开发之走进Vue.js
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...
- 小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能
小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例,希望对你与学习前端的你有所帮助,今天分享的是移动端Vue+Vant的Uploader实现上传.压缩.旋转图片等功能的详细介 ...
- vue 高阶面试题_高级Web前端工程师面试之Vue问题汇总解析
又是一年毕业季,很多学习前端的同学面对激烈的求职竞争倍感压力,想要了解企业招聘会提问哪些问题.今天千锋郑州Web前端培训小编就给大家分享一下高级Web前端工程师面试中有关Vue的问题及解析. 1.Vu ...
最新文章
- hive能加快MySQL查询速度吗_建立索引可以加快表中数据查询的速度吗
- php如何获取ajax请求,php-从ajax调用获取json数据
- Java中的观察者设计模式-示例教程
- bootstrap 悬浮固定_CST Tech Tips - 流式细胞术中如何固定和通透细胞?
- java jmx 监控_只用五分钟为系统实现基于JMX的监控
- Linux学习资源汇总
- LNMP一键安装shell脚本
- 测试使用navicat工具将MySQL格式SQL文件导入到MogDB数据库
- 萌新学python(输入与输出)
- silverlight Balder 动态材质(用网上的图片)
- python调用摄像头录制视频_Python OpenCV使用摄像头捕获视频
- SpringMVC上传文件的三种方式
- 情感分析语料库——情感词典(中文英文)转
- java udp 断开_java – 如何中断阻塞调用UDP socket的receive()[复制]
- 控制系统状态空间表达式的解(1)——求解线性定常系统零输入响应
- 实现 EC20 4G模块PPP拨号上网
- 腾讯新版 Windows QQ 首个公测版发布,采用全新 QQ NT 架构
- 【原创】改进的大马webshell,过市面上任何防护
- Ansj中文分词说明
- 当输入 https://www.baidu.com 时,返回页面的过程中发生了什么?
热门文章
- STM32 HAL库 UART 串口读写功能笔记
- SSM-网站后台管理系统制作(3)---Google的reCaptcha验证码
- BZOJ 3626 LCA(离线+树链剖分+差分)
- Android初学第53天
- JAVA编码(27)——执行批量导入Excel文件并进行解析
- 【leetcode】Min Stack -- python版
- 如何让公司的核心价值观落地?
- SilverLight是什么?(来自Csdn)
- UP-DETR:收敛更快!精度更高!华南理工微信开源无监督预训练目标检测模型...
- S2-MLPV2:目前最强的视觉MLP架构,空降榜一,达到83.6% Top-1准确率