Micro front-end: puntos a tener en cuenta al utilizar el marco qiankun

Principales puntos tecnológicos de la aplicación.

Parámetros de la función RegistrableApp

registerMicroApps([
  {
    
    
    name: "vue2 app 1", //子应用名称
    entry: "//localhost:10001", //子应用端口号
    container: "#v2-app-1", //子应用挂载的元素
    activeRule: "/v2-app-1", //子应用路径匹配规则，匹配其中一个则渲染对应子应用
    props: {
    
    
      params1: "zs",
      params2: 123,
      params3: {
    
    
        name: "zs",
        age: 15,
      },
    },
  },
  {
    
    
    name: "vue2 app 2",
    entry: "//localhost:10002",
    container: "#v2-app-2",
    activeRule: "/v2-app-2",
  },
]);

1. El valor del nombre es único.
2. Cuando la URL del navegador cambia, las reglas activeRule registradas para cada microaplicación se verificarán automáticamente y las aplicaciones que cumplan con las reglas se activarán automáticamente.

empezar iniciar el proyecto

setDefaultMountApp

Una vez completada la inicialización, ingrese la subaplicación predeterminada

ejecutarDespuésPrimeroMontado

Métodos que deben llamarse después de montar la primera microaplicación, como habilitar algunos scripts de monitoreo o enterrar.

Nota: el sitio web oficial de qiankun actualmente no admite proyectos empaquetados de Vite

Solución: use el paquete vite-plugin-qiankun. Aún no lo he usado, pero veo que algunas personas lo están usando.