微前端MicroApp5分钟让你轻松掌握微前端MicroApp5分钟让你轻松掌握之前我将我们本地的项目全部使用vite

微前端MicroApp5分钟让你轻松掌握

::: tip

https://nexuslin.github.io/

源码地址，求个star

期待你的建议！

GIthub地址

Gitee地址

GIthub地址:https://gitee.com/lintaibai/TG

Gitee地址:https://gitee.com/lintaibai/TG

相遇有缘，特别为你赠诗一首！

同路之人，幸得君顾，盼得君之一赞！
与君同行，愿得青眼相加！

你的star
如春风化雨，润物无声；
如山间清泉，滋润心田；
如长河落日，映照初心；
亦如暗夜明灯，照亮前路；
是吾辈前行之明灯，亦是我坚持的动力!
愿君前程似锦，代码如诗，人生如画！

:::

之前我将我们本地的项目全部使用vite进行了重构，包括React、vue3项目

接下来我们就将自己的这两个项目使用micro-app进行改造成微前端项目，先来简单看看MicroApp是什么

MicroApp认识

官方网站

https://jd-opensource.github.io/micro-app/docs.html#/


演示地址
https://www.micro-zoe.com/main-vue2/app-vue2

认识

MicroApp是一款基于类WebComponent进行渲染的微前端框架，不同于目前流行的开源框架，它从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。

是目前市面上接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。MicroApp与技术栈无关，也不和业务绑定，可以用于任何前端框架和业务。

业务采取技术对比

iframe：在所有微前端方案中，iframe是最稳定的、上手难度最低的，但它有一些无法解决的问题，例如性能低、通信复杂、双滚动条、弹窗无法全局覆盖，成长性不高，只适合简单的页面渲染。

npm包：将子应用封装成npm包，通过组件的方式引入，在性能和兼容性上是最优的方案，但却有一个致命的问题就是版本更新，每次版本发布需要通知接入方同步更新，管理非常困难。

微前端框架：流行的微前端框架有single-spa和qiankun，它们将维护成本和功能上达到一种平衡，是目前实现微前端备受推崇的方案。

虽然qiankun比较优秀，但是需要代码修改和沟通成本，尤其在乙方不进行更改的情况下，所需要付出的成本几乎呈现几何倍数的增加，因此我这里首先采取了MicroApp进行实现,接下来我们就将vue2、vue3、React项目使用MicroApp进行结合起来

使用

接下来我们在项目之中使用micro-app，首先是我们的主应用，我们的应用分层是这样子的

Vue3 主应用
   vue2 分应用

react18分应用
   react 16 分应用

主应用配置

加载子应用

主应用之中引入子应用,这里我是以vue3 作为我们的主应用模块的,这里我们先引入React+antd这一套试试，我们端口为8083

安装版本`micro-app依赖`

在我们的主应用Vue3之中进行安装

pnpm i @micro-zoe/micro-app --save

安装成功以后我们可以看到依赖部分
"@micro-zoe/micro-app": "1.0.0-rc.28",

初始化`micro-app`

主应用根目录下面初始化我们入口，我的是main.ts

// index.js
import microApp from '@micro-zoe/micro-app'

microApp.start()

路由配置

{
    path: "/reactantd",
    name: "reactantd",
    meta: { title: "reactantd", icon: "User", show: true },
    children: [],
    component: () => import("@/views/module/weiqianduan/reactantd/index.vue"),
  },

页面使用

<micro-app 
  name='nexus-react' 
  url='http://localhost:8083/' 
  baseroute="/reactantd" iframe>
</micro-app>

[子应用]配置

vite其中的配置部分我们必须保证我们有下面的内容

export default defineConfig({
  server: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  }
})

这个时候我们重新启动一下项目，我们可以看到项目给我们的报错，这里我们重新启动确定一下我们地址配置的没有问题即可

@micro-zoe_micro-app.js?v=6a3e7321:151 [micro-app] app my-app:

尝试一下，这个时候我们嵌入的部分已经成功了

特别注意

经过我的尝试，我发现有两个点需要特别的关注

:::info 1、授权鉴权系统这个不用想，同鉴权系统我们才能嵌入进去

2、配置完没有问题以后我尝试了几次都没成功，这里格外注意

  我们需要重新启动项目，清理浏览器缓存以后我们的配置才能生效

:::

补充

调试的时候需要注意

我们只可以本地调试本地
或者线上调试线上


在本地调试线上这种模式下，是跨域无法成功的

微前端MicroApp5分钟让你轻松掌握