如何来实现这个微前端乾坤

最新推荐文章于 2025-04-02 11:12:15 发布

前段技术人

最新推荐文章于 2025-04-02 11:12:15 发布

阅读量603

点赞数 18

文章标签：前端 vue.js qiankun

本文链接：https://blog.youkuaiyun.com/mi1981422521/article/details/146093817

版权

微前端乾坤（qiankun）属于一种微前端实现库2。

乾坤基于 single-spa 进行封装，旨在帮助开发者更简单、无痛地构建生产可用的微前端架构系统2。它具有以下特点2：

技术栈无关：支持 React、Vue、Angular、jQuery 等任意技术栈的应用接入，使主应用和微应用都能做到技术栈无关，开发团队可根据具体业务需求选择最合适的技术栈。
HTML Entry 接入：采用 HTML Entry 接入方式，让微应用的接入像使用 iframe 一样简单，降低了微前端的实施门槛。
样式隔离与 JS 沙箱：通过 Shadow DOM、scoped CSS 或 CSS 前缀等方式实现样式隔离，利用代理对象实现 JS 沙箱机制，确保微应用之间样式不互相干扰、全局变量和事件不冲突。
资源预加载：能在浏览器空闲时间预加载未打开的微应用资源，加速微应用的打开速度，提升用户体验。
umi 插件支持：提供了 @umijs/plugin-qiankun，供 umi 应用一键切换成微前端架构系统，方便了 umi 用户使用微前端架构。

1. 初始化项目

首先，你需要创建主应用和子应用项目。这里以使用 Vue 和 React 分别作为主应用和子应用为例，使用create - vite来创建项目。

主应用（Vue）

npm init vite@latest main-app -- --template vue
cd main-app
npm install

子应用（React）

npm init vite@latest sub-app -- --template react
cd sub-app
npm install

2. 安装乾坤

在主应用和子应用中分别安装qiankun

主应用

cd main-app
npm install qiankun

子应用

cd sub-app
npm install qiankun

3. 配置子应用

在子应用中，需要对其进行一些配置以支持乾坤微前端。

修改`vite.config.js`

// sub-app/vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 8081, // 子应用端口
    headers: {
      'Access-Control-Allow-Origin': '*' // 允许跨域
    }
  }
})

导出乾坤生命周期钩子

// sub-app/src/main.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

let root;

function render() {
  root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// 乾坤生命周期钩子
export async function bootstrap() {
  console.log('子应用启动');
}

export async function mount(props) {
  console.log('子应用挂载', props);
  render();
}

export async function unmount() {
  console.log('子应用卸载');
  root.unmount();
}

4. 配置主应用

修改`vite.config.js`

// main-app/vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8080 // 主应用端口
  }
})

在主应用中注册和加载子应用

<template>
  <div id="app">
    <h1>主应用</h1>
    <div id="sub-app-container"></div>
  </div>
</template>

<script setup>
import { registerMicroApps, start } from 'qiankun';

// 注册子应用
registerMicroApps([
  {
    name: 'sub-app', // 子应用名称
    entry: '//localhost:8081', // 子应用入口
    container: '#sub-app-container', // 子应用挂载节点
    activeRule: '/sub-app' // 子应用激活规则
  }
]);

// 启动乾坤
start();
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>