MicroApp的Vite项目，特别全面

目录

前言

简介

分离

修改基座

子应用修改

修改vite.config.js​编辑

修改index.html

基座修改

处理子应用静态资源

效果

基座与子应用传值

在基座的MicroApp的index页面修改

在子应用的App.tsx文件进行useEffect的监听

效果​编辑

去掉菜单栏头部

效果​编辑

总结

---

前言

该文章用的技术栈是React+Vite+Ts,他的microApp配置相对于React和vue配置相对复杂一些，如果您没有了解基础可以看看(2条消息) 新星微前端MicroApp的基础教程_强壮的糙汉子的博客-CSDN博客这篇文章

简介

这个是我们公司所有后台的管理系统，大家可以看大非常非常的复杂，而我在的部门在分销部门，我们只开发这个部分

可是就会发现有两个问题：

1、虽然我们已经在项目中使用vite，但是它启动的时候还是速度不够理想

2、我们有很多部门在一起开发，每次提交拉去的时候都可能会面临冲突问题

基于以上这几点，我们调研现在比较火的微前端，经过了一系列的技术选型最后定了微前端中的新星京东的microApp

 

分离

我们把项目复制一份，

 

然后把分销作为子应用，原有项目作为基座

我们把分销的路由进行注释一下，把其全部分离出来（我们先把分离出来，随后分离成功在去删除依赖，以及删除页面，减轻打包负担，从而可以起服务更快）

然后就会发现这个项目被单独分离出来了

修改基座

我们需要创建一个页面，在src文件下，创建一个MicroApp文件,并创建index.tsx文件！

 

写入如下代码

import React, { useEffect } from 'react'
import microApp from '@micro-zoe/micro-app'

export default function Distribution() {
  return (
      <micro-app
        name='distribution'
        url='http://localhost:8001/'
        inline // 使用内联script模式
        disableSandbox // 关闭沙箱
      />
  )
}

我们把子应用分离出来了，但是我们的基座还有页面，我们把基座关于分销的页面路由的element都指向

 然后就会看到页面