qiankun 微服务 架构

Qiankun 微服务架构是一个基于微前端的解决方案，它可以帮助开发者将一个大型的前端应用拆分成多个小型的子应用，每个子应用可以独立开发、独立部署、独立运行，同时还可以通过 Qiankun 提供的 API 实现子应用之间的通信和数据共享。

相关问题

乾坤微前端react

### 乾坤微前端框架与React结合使用教程

#### 创建React子应用
为了创建一个可以作为微前端使用的React子应用，推荐使用`create-react-app`来初始化项目环境[^1]。这一步骤简化了许多配置工作，使得开发者能够专注于业务逻辑的开发。

npx create-react-app my-microfrontend-app
cd my-microfrontend-app
npm start

#### 配置生命周期函数
为了让React应用成为qiankun兼容的应用程序，需要定义特定的生命週期钩子——`bootstrap`, `mount`, 和 `unmount`。这些方法允许主应用程序控制子应用的行为，在加载、渲染和卸载阶段执行必要的操作[^3]。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const render = (props) => {
    const container = document.getElementById('root');
    const root = ReactDOM.createRoot(container);
    
    root.render(<App />);
};

// 初始化时调用
export async function bootstrap() {
    console.log('React app bootstrapped');
}

// 加载组件并将其挂接到DOM树上
export async function mount(props) {
    render(props);
}

// 卸载组件前清理资源
export async function unmount() {
    const container = document.getElementById('root');
    const root = ReactDOM.createRoot(container);

    root.unmount();
}

#### 注册子应用至QianKun Shell Application
最后一步是在壳应用中注册这个新创建的React子应用。通过向shell application传递相应的参数完成这一过程，包括名称、入口URL和其他选项[^4]。

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'my-react-subapp',
    entry: '//localhost:3000', // 子应用的服务地址
    container: '#subapp-container',
    activeRule: '/react'
  }
]);

start(); // 启动qiankun

vite配置乾坤框架

vite配置乾坤框架需要先安装vite和qiankun的相关依赖，然后在vite项目的根目录下创建一个qiankun.config.js的配置文件。在这个配置文件中，需要设置主应用和子应用的相关信息，比如子应用的名称、入口、路由等。接着在主应用的入口文件中引入qiankun的相关方法，并根据配置信息动态注册子应用。同时，还需要在子应用的入口文件中导出一个生命周期函数，用来指定子应用的挂载、卸载和激活时的操作。

除了以上的配置外，还需要注意在vite的配置文件中进行一些特殊的配置，比如设置跨域代理、打包输出路径等。最后，通过vite启动主应用和子应用的开发服务器，就可以在浏览器中进行调试和查看效果了。

总的来说，vite配置乾坤框架需要理解qiankun的相关概念和使用方法，熟悉vite的配置方式，以及对主子应用的开发和打包有一定的了解。只有将这些知识结合起来，才能够顺利地完成vite配置乾坤框架的工作。