[Micro interfaz] qiankun + vite + vue3

columna:

• [Micro Frontend] ¿Qué es un Micro Frontend?
• 【Micro interfaz】qiankun
• [Micro interfaz] qiankun + vite + vue3

1. Estructura general

Bajo el sistema qiankun, un proyecto de micro-frontend incluye una aplicación principal y múltiples aplicaciones secundarias. Esencialmente, cada proyecto (aplicación principal) se puede desarrollar y ejecutar de forma independiente.

1.1 Estructura del proyecto durante el desarrollo

Un total de tres proyectos, una aplicación principal, dos sub-aplicaciones, estructura de directorios:

.
├── app-01
│   ├── README.md
│   ├── index.html
│   ├── package.json
│   ├── pnpm-lock.yaml
│   ├── public
│   ├── src
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   └── vite.config.ts
├── app-02
│   ├── README.md
│   ├── index.html
│   ├── package.json
│   ├── pnpm-lock.yaml
│   ├── public
│   ├── src
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   └── vite.config.ts
├── main-app
│   ├── README.md
│   ├── index.html
│   ├── package.json
│   ├── pnpm-lock.yaml
│   ├── public
│   ├── src
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   └── vite.config.ts
└── readme.md

1.2 Estructura del proyecto de implementación

Hay muchos métodos de implementación para elegir. El método utilizado aquí es implementar los tres proyectos en el mismo servidor y el mismo puerto. La estructura del directorio es:

.
├── index.html
├── static
│   ├── index-011eeef2.css
│   └── index-0ab867b1.js
├── sub
│   ├── app-01
│   │   ├── index.html
│   │   ├── static
│   │   │   ├── index-0244ff29.js
│   │   │   └── index-83c9dd61.css
│   │   └── vite.svg
│   └── app-02
│       ├── index.html
│       ├── static
│       │   └── index-cb440182.js
│       └── vite.svg
└── vite.svg

2. Desarrollo

Durante el desarrollo, los puertos de escucha correspondientes a las tres aplicaciones:

solicitud	puerto
aplicación principal	80
aplicación-01	8081
aplicación-02	8082

Una vez iniciado el proyecto, se puede acceder a él en el navegador:

• http://localhost:80 El efecto general de la operación
• http://localhost:8081 app-01 ejecutándose solo
• http://localhost:8082 app-02 ejecutándose solo

2.1 Aplicación principal

主应用Se utiliza para registrar aplicaciones secundarias y controlar el cambio entre aplicaciones secundarias.

A. Registrar sub-aplicaciones

Registre la aplicación secundaria en main.ts del proyecto vue3 recién creado:

// 开发模式时，entry的值为子应用的开发演示环境的地址
if ("development" === import.meta.env.MODE) {
    
    
  registerMicroApps([
    {
    
    
      name: "app_01",
      entry: "//localhost:8081/",
      container: "#container",
      activeRule: "/app_01",
    },
    {
    
    
      name: "app_02",
      entry: "//localhost:8082/",
      container: "#container",
      activeRule: "/app_02",
    },
  ]);
} else {
    
    
  // 生产环境时，entry的路径为app在部署时的真实路径
  registerMicroApps([
    {
    
    
      name: "app_01",
      entry: "./sub/app-01",
      container: "#container",
      activeRule: "/app_01",
    },
    {
    
    
      name: "app_02",
      entry: "./sub/app-02",
      container: "#container",
      activeRule: "/app_02",
    },
  ]);
}

setDefaultMountApp("/app_01");

// 启动 qiankun
start();

Al registrar aplicaciones secundarias, hay dos modos, modo de desarrollo y modo de implementación, y los entryvalores correspondientes son diferentes.

B. Enrutamiento de sub-aplicaciones

<a @click="toApp('/app_01')">app 01</a>

function toApp(path: string) {
    
    
  history.pushState({
    
    }, "", path);
}

Cabe señalar que el href de la etiqueta a no se puede usar aquí, se informará un error 404 y se history.pushStatedebe usar la ruta de control.

Debido a que hrefel atributo hará que el navegador se actualice, no se puede obtener el recurso.

2.2 Subaplicaciones

A. Instalar dependencias

pnpm agregar vite-plugin-qiankun

vite.config.js

Modificación del archivo de configuración

export default defineConfig({
    
    
  // 打包时，这里填充的为绝对路径，对应的是部署路径
  base: "/sub/app-01",
  plugins: [
    vue(),
    qiankun("app-01", {
    
    
      useDevMode: true,
    }),
  ],
});

C. Modernización de la entrada

Hay dos formas de empezar:

• empezar solo
• Iniciar en la aplicación principal

qiankun requiere sub-aplicaciones para exportar tres interfaces:

• oreja
• montar
• desmontar

import {
    
    
  renderWithQiankun,
  qiankunWindow,
} from "vite-plugin-qiankun/dist/helper";

import {
    
     App as VueApp, createApp } from "vue";
import router from "./router";
import App from "./App.vue";

let app: VueApp<Element>;
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
    
    
  createApp(App).use(router).mount("#app");
} else {
    
    
  renderWithQiankun({
    
    
    mount(props) {
    
    
      console.log("--app 01 mount");

      app = createApp(App);
      app.use(router);
      app.mount(
        (props.container
          ? props.container.querySelector("#app")
          : document.getElementById("app")) as Element
      );
    },
    bootstrap() {
    
    
      console.log("--app 01 bootstrap");
    },
    update() {
    
    
      console.log("--app 01 update");
    },
    unmount() {
    
    
      console.log("--app 01 unmount");
      app?.unmount();
    },
  });
}

3. Despliegue

Después de empaquetar los tres proyectos en secuencia, main-appcree una nueva subcarpeta en la salida empaquetada y mueva la salida empaquetada de la subaplicación a la subcarpeta. estructura:

.
├── index.html
├── static
│   ├── index-011eeef2.css
│   └── index-0ab867b1.js
├── sub
│   ├── app-01
│   │   ├── index.html
│   │   ├── static
│   │   │   ├── index-0244ff29.js
│   │   │   └── index-83c9dd61.css
│   │   └── vite.svg
│   └── app-02
│       ├── index.html
│       ├── static
│       │   └── index-cb440182.js
│       └── vite.svg
└── vite.svg

Inicie un servicio web estático localmente para acceder a la página, por ejemplo, use serveel comando para iniciar el servicio:

serve . -p 5500

Acceso en navegador: http://localhost:5500

cuatro, pozos

001. Cuando la aplicación principal registra la aplicación, activeRulehay dos modos

modo hash

const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
registerMicroApps([
  {
    
    
    name: "app-hash",
    entry: "http://localhost:8080",
    container: "#container",
    activeRule: getActiveRule("#/app-hash"),
    // 这里也可以直接写 activeRule: '#/app-hash'，但是如果主应用是 history 模式或者主应用部署在非根目录，这样写不会生效。
  },
]);

modo historia

registerMicroApps([
  {
    
    
    name: "app",
    entry: "http://localhost:8080",
    container: "#container",
    activeRule: "/app",
  },
]);

002. historyCómo controlar el cambio de aplicaciones secundarias cuando se utiliza la aplicación principal

En el modo de historial, la aplicación principal monitoreará location.pathnamelos cambios para cambiar la carga y descarga de aplicaciones secundarias.

En la aplicación principal, al usar una nota adhesiva para cambiar de aplicación:

<!-- 开发环境时，没有问题 -->
<!-- 部署环境时，会报错：/app_01 404的错误 -->
<a href="/app_01">app 01</a>

El motivo de 404, durante la implementación estática: la etiqueta a activará la actualización del navegador.Después de la actualización, el navegador inicia una solicitud al fondo /app_01, y el fondo no tiene esta ruta física

Esquema de mejora, utilice history.pushStatela interfaz:

<a @click="toApp('/app_01')">app 01</a>

function toApp(path: string) {
    
    
  history.pushState({
    
    }, "", path);
}

El método utilizado history.pushStateno activará el comportamiento de actualización del navegador. Cuando el navegador pathnamecambie, qiankundetectará el cambio de ruta y cargará la página correspondiente.

En este punto, si F5la operación de actualización no se realiza activamente, todo es normal. Pero F5después de usarlo, aún se informará un error 404. En este momento, el enrutamiento en segundo plano debe cooperar. Tome Nginx como ejemplo:

server {
  listen       8080;
  server_name  localhost;

  location / {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  location /child/vue-history {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /child/vue-history/index.html;
  }
}

6. Código fuente

Dirección de origen: https://github.com/swlws/qiankun-vite-vue3