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

 更新时间:2020年05月27日 09:52:48   作者:狼族小狈  
这篇文章主要介绍了基于Vue CSR的微前端实现方案实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

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

本篇文章的受众是那些希望在新老的项目中,在不需要你对老项目进行改动老项目的前提下,嵌入微应用,如果本篇文章对你有帮助,请点个:+1:!

核心要素

  • 构建生产环境代码,输出远程组件所需的 JSON
  • 通过 ajax 请求,拿到这个 JSON 的数据,传给 远程组件

新项目的搭建

对于项目的搭建,在这里就不再仔细的展开讲了,大家直接看 Genesis 项目快速开始的文档吧

修改编译代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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 访问到这个文件。

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

1
npm install @fmfe/genesis-remote axios

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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

拓展

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * 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微前端内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://juejin.im/post/5ecbeae8f265da76e12582ef

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • Vue解决echart在element的tab切换时显示不正确问题

    Vue解决echart在element的tab切换时显示不正确问题

    这篇文章主要介绍了Vue解决echart在element的tab切换时显示不正确问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue点击按钮跳转到另一个vue页面实现方法

    vue点击按钮跳转到另一个vue页面实现方法

    这篇文章主要给大家介绍了关于vue点击按钮跳转到另一个vue页面的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • Vue3中如何使用v-model高级用法参数绑定传值

    Vue3中如何使用v-model高级用法参数绑定传值

    本文给大家介绍Vue3中使用v-model高级用法参数绑定传值的相关知识,包括单个输入框传值和多个输入框传值,一个组件接受多个v-model值,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-10-10
  • uniapp引入模块化js文件和非模块化js文件的四种方式

    uniapp引入模块化js文件和非模块化js文件的四种方式

    这篇文章主要介绍了uniapp引入模块化js文件和非模块化js文件的四种方式,本文结合实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • 浅谈基于Vue.js的移动组件库cube-ui

    浅谈基于Vue.js的移动组件库cube-ui

    这篇文章主要介绍了基于Vue.js的移动组件库cube-ui,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue3实现可视化拖拽标签小程序功能

    Vue3实现可视化拖拽标签小程序功能

    这篇文章主要介绍了Vue3实现可视化拖拽标签小程序,实现功能可视化标签拖拽,双击标签可修改标签内容,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • Vue计算属性的使用

    Vue计算属性的使用

    本篇文章主要介绍了Vue计算属性的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue3中的Refs和Ref详情

    Vue3中的Refs和Ref详情

    这篇文章主要介绍了Vue3中的Refs和Ref,文章围绕Vue3中的Refs和Ref得相关资料应用举例烦人方式展开详细内容,需要的朋友可以参考一下
    2021-11-11
  • vue3项目+element-plus:时间选择器格式化方式

    vue3项目+element-plus:时间选择器格式化方式

    这篇文章主要介绍了vue3项目+element-plus:时间选择器格式化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue3源码分析侦听器watch的实现原理

    Vue3源码分析侦听器watch的实现原理

    watch 的本质就是观测一个响应式数据,当数据发生变化时通知并执行相应的回调函数。watch的实现利用了effect 和 options.scheduler 选项,这篇文章主要介绍了Vue3源码分析侦听器watch的实现原理,需要的朋友可以参考下
    2022-08-08

最新评论