使用 qiankun 集成 react18+vite 项目

基座项目

基座项目可见qiankun 示例

子应用改造

vite 本身不支持 qiankun，需要安装 vite-plugin-qiankun

pnpm install vite-plugin-qiankun

使用 qiankun 集成 vue2+vite 项目

基座项目

基座项目可见qiankun 示例

子应用改造

vite 本身不支持 qiankun，需要安装 vite-plugin-qiankun

pnpm install vite-plugin-qiankun

使用 qiankun 集成 vue2+webpack 项目

基座项目

基座项目可见qiankun 示例

子应用改造

子应用不需要额外安装任何其他依赖即可接入 qiankun 主应用

配置环境变量

配置环境变量，是子应用既可以单独运行又可以接入主应用

然后在 package.json 中配置启动脚本

使用 qiankun 集成 vue3+vite 项目

基座项目

基座项目可见qiankun 示例

子应用改造

vite 本身不支持 qiankun，需要安装 vite-plugin-qiankun

pnpm install vite-plugin-qiankun

项目地址

qiankun-template

搭建基座项目

在命令行中运行以下命令

pnpm create vue@latest

qiankun 是一个基于 single-spa 的微前端实现库

qiankun 集成子项目示例

详见qiankun 示例

props

主应用中定义 props

在主应用中，注册子应用的基础配置信息时，定义 props ，编写需要传递给子应用的信息

const apps: RegistrableApp<any>[] = [
  // ...
  {
    name: 'app2',
    entry: 'http://localhost:8082/app2',
    container: '#microApp',
    activeRule: '/app2',
    props: {
      title: 'props 传递的参数'
    }
  },
]

项目地址

single-spa-template

搭建基座项目

在命令行中运行以下命令

pnpm create vue@latest

通过 iframe，可以很轻松的将一个应用嵌入另一个应用中，而两个项目的静态资源是相互隔离的

<iframe src="http://localhost:3001/api"></iframe>
<iframe src="http://localhost:3002/api"></iframe>

路由分发式微前端，即通过路由将不同的业务分发到不同的独立前端应用上。最常用的方案是通过 HTTP 服务的反向代理 来实现。

配置 nginx

通过 nginx 代理多个服务地址，不同页面的请求就可以分发到不同的服务器上。

http {
  server {
      listen 80;
      server_name  xxx.xxx.com;
      location /api/ {
          proxy_pass http://localhost:3001/api;
      }
      location /web/admin {
          proxy_pass http://localhost:3002/api;
      }
      location / {
          proxy_pass /;
      }
  }
}

single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。

实现方法

single-spa 提供了一种基于路由的基座化的微前端方案，它将应用分为两类：基座应用和子应用。其中，子应用对应需要聚合的应用，基座应用是另外一个单独的应用，用于聚合子应用。

在基座应用中，我们会维护一个路由注册表 - 每个路由对应一个子应用。基座应用启动以后，当我们切换路由时，如果是一个新的子应用，会动态获取子应用的 js 脚本，然后执行脚本并渲染出相应的页面；如果是一个已经访问过的子应用，那么就会从基座应用的缓存中获取已经缓存的子应用，激活子应用并渲染出对应的页面。