基于qiankun的以Vue3为基座的微程序实现

前言

基座：基于vite的vue3.2 (base-app)

子程序：基于vite的vue3.2 (micro-app-vue)、基于webpack的Angular (micro-app-angular)、基于webpack的React (micro-app-react)

一、基于vite的vue3.2基座配置(base-app)

1. 安装路由和配置路由，和往常一样，过程略

2. App.vue

<template>
  <div style="text-align: center">
    <router-link to="/"><h1>这里是主应用</h1></router-link>
    <br />
    <router-link to="/vue">显示Vue微应用</router-link>
    <br />
    <router-link to="/angular">显示Angular微应用</router-link>
    <br />
    <router-link to="/react">显示React微应用</router-link>
    <hr />
    <!-- 准备好子应用待渲染的容器 -->
    <div id="microAppContainer"></div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

3. 安装qiankun

npm i qiankun -S

4. 新建registerApps.ts文件后在main.ts引入，或直接在main.ts写入如下内容，以下为新建

• registerApps.ts

// 注册微应用文件
import { registerMicroApps, start } from 'qiankun';

// 注册多个微应用
registerMicroApps(
  [
    {
      name: 'micro-app-vue',
      entry: '//localhost:8001',
      container: '#microAppContainer', // App.vue配置的节点
      activeRule: '/vue',
      props: {} // 用于传参
    },
    {
      name: 'micro-app-angular',
      entry: '//localhost:4200',
      container: '#microAppContainer', // App.vue配置的节点
      activeRule: '/angular',
      props: {} // 用于传参
    },
    {
      name: 'micro-app-react',
      entry: '//localhost:6000',
      container: '#microAppContainer', // App.vue配置的节点
      activeRule: '/react',
      props: {} // 用于传参
    },
  ],
  {
    beforeLoad: async (app) => {
      console.log('beforeLoad...', app.name);
    },
    beforeMount: async (app) => {
      console.log('beforeMount...', app.name);
    },
    afterMount: async (app) => {
      console.log('afterMount...', app.name);
    },
    afterUnmount: async (app) => {
      console.log('afterUnmount...', app.name);
    }
  }
);
// 启动 qiankun
// start({
//   prefetch: 'all', // 预加载
//   sandbox: {
//     strictStyleIsolation: true, // 开启严格的样式隔离模式
//     experimentalStyleIsolation: true
//   }
// });
start();

•  main.ts

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import router from './router/router';
// 在main.ts引入registerMicroApp.ts
import './registerApps';

createApp(App).use(router).mount('#app');

 

二、基于vite的vue3.2子程序配置(micro-app-vue)

1. 安装路由和配置路由，和往常一样，过程略

2. 安装vite-plugin-qiankun插件

npm i vite-plugin-qiankun -S

3. 配置vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import qiankun from 'vite-plugin-qiankun';

// https://vitejs.dev/config/
export default defineConfig({
  base: '/vue',
  plugins: [vue(), qiankun('micro-app-baseVue', { useDevMode: true })],
  server: {
    host: '0.0.0.0',
    port: 8001, // 2000端口
    open: false,
    cors: true,
    origin: 'http://localhost:8001'
  }
});

4. 配置main.ts

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
import router from './router/router';

let app: any;

// 没有乾坤时，即独立运行
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  // render();
  createApp(App).use(router).mount('#app');
} else {
  renderWithQiankun({
    mount(props) {
      app = createApp(App);
      app.mount(props.container?.querySelector('#app'));
    },
    bootstrap() {
      console.log('bootstrap');
    },
    update() {
      console.log('update');
    },
    unmount() {
      console.log('unmount');
      app?.unmount();
    }
  });
}

 

三、Angular子程序配置(micro-app-angular) 

版本：angular14

插件：single-spa-angular@7

步骤：

1. 创建子应用

ng new micro-app-angular --routing --prefix micro-app-angular

cd micro-app-angular 

2. 安装single-spa-angular

ng add single-spa-angular --project micro-app-angular

3.在main.single-spa.ts文件中做修改

将环境相关的配置注释

4.在app-routing.module.ts文件中

+ import { APP_BASE_HREF } from '@angular/common';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  // @ts-ignore
  + providers: [{ provide: APP_BASE_HREF, useValue: window.__POWERED_BY_QIANKUN__ ? '/angular' : '/' }]
})

此处的/angular要与主应用配置一致

5.需要给子应用加唯一标识(多个angular子应用时）

如果不加会出现container即主应用中微应用容器container找不到的问题

在main.single-spa.ts中

template: '<app-root id="child_one"/>',

完整代码展示

const lifecycles = singleSpaAngular({
  bootstrapFunction: singleSpaProps => {
    singleSpaPropsSubject.next(singleSpaProps);
    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
  },
  template: '<app-root id="child_one"/>',
  Router,
  NavigationStart,
  NgZone,
});

在app.component.ts中

selector: '#child_one app-root',

完整代码展示

@Component({
  selector: '#child_one app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

6.为了能让子应用单独运行还要添加一下内容

如果不写 子应用不能单独运行，但可以在主应用中运行

在main.single-spa.ts中

import 'zone.js/dist/zone';

// 微应用单独启动时运行
if (!(window as any).__POWERED_BY_QIANKUN__) {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
}

 

7. 以下未确定是不是必须：

注释 polyfills.ts 中 import 'zone.js';

在主应用中安装zone.js

npm i zone.js

在主应用main.ts引入qiankun前，引入zone.js

import 'zone.js';

 

搞定！！！！