qiankun基座+react+vite子应用搭建微前端

主应用

你可以选择在现有的项目进行搭建qiankun基座，也可以新开一个项目来搭建qiankun基座

我这里直接选择在已有项目搭建一个

先安装 qiankun ：

csharp 复制代码

$ yarn add qiankun # 或者 npm i qiankun -S

注册主应用

php 复制代码

import { registerMicroApps, start } from 'qiankun';


registerMicroApps([
  {
    name: 'datartApp', // app name registered
    entry: '//localhost:5174',
    container: '#subapp',
    activeRule: '/IframePage/iframe_test',
  },
]);
// 启动 qiankun
start();

几个说明

name是子应用的名称，这个后面可以看到 entry就是子应用的启动地址 container是子应用挂载到基座的节点 activeRule是触发加载子应用的路由，当然也有不是通过路由触发子应用的方法

注册子应用

使用vite-plugin-qiankun插件

1.在main.jsx中挂载

和官网的有所不同，这个写法判断是否前端环境去挂载到对应的节点上

js 复制代码

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import { Provider } from 'react-redux';
import store from './store';
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
import React from 'react'

let root = null; // 👈 保存 createRoot 实例

// 创建 React 渲染方法
const render = (props = {}) => {
  const { container } = props;
  const mountNode = container
    ? container.querySelector('#root')
    : document.getElementById('root');

  if (mountNode) {
    root = createRoot(mountNode); // 👈 保存实例  
    root.render(
      <Provider store={store}>
        <App />
      </Provider>
    );
  }
};

console.log(qiankunWindow.__POWERED_BY_QIANKUN__, 'qiankun环境下');

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render();
}

renderWithQiankun({
  mount(props) {
    console.log('mount');
    render(props);
  },
  bootstrap() {
    console.log('bootstrap');
  },
  unmount(props) {
    console.log('unmount');
    root?.unmount(); // 👈 正确卸载
    const { container } = props;
    const mountNode = container?.querySelector('#root');
    if (mountNode) mountNode.innerHTML = ''; // 可选：清理内容
    root = null;
  },
});

2.vite的配置修改，声明挂载节点和名称

这里的datartApp就是对应上面在主应用基座里面的配置

js 复制代码

plugins: [
      react(),
      tailwindcss(), 
      qiankun("datartApp", {
        useDevMode: true,
      })],

配置好子应用之后的报错

这个错误通常发生在微前端子应用的 HTML 中使用 <script type="module"> 来引入脚本时，它可能会发生冲突，特别是在处理 react-refresh 和 HMR（热模块替换）时。

错误的原因：

react-refresh 是 React 开发模式下热模块替换的一部分，用来在不刷新整个页面的情况下更新组件。如果在微前端（比如 qiankun）的子应用中引入了这个模块，它可能会与其他脚本冲突，导致遇到 import-html-entry 相关的错误。

js 复制代码

import qiankun from 'vite-plugin-qiankun';
export default defineConfig(({mode}) => {
  const isDev = mode === 'development'
  return {
    plugins: [
      !isDev && react(),
      tailwindcss(), 
      qiankun("datartApp", {
        useDevMode: true,
      })],

这里就不会引入react，react就不会初始化，所以需要在入口文件引入一遍