微前端qiankun，Vite项目配置

使用qiankun框架搭建微前端的时候，因为qiankun官方文档没有给出vite框架的配置方式，

这里记录一下。 1、安装 vite-plugin-qiankun 插件

npm i vite-plugin-qiankun

2、修改index.html

<div id="qzhang"></div>

修改id 将app改成其它名字 避免id重复导致挂载失败 3、修改main.js

import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'; 
let app = null; 
const render = (props = {}) => {     
    const { container } = props;     
    const selectot = container?.querySelector('#qzhang') || '#qzhang'; // 避免 id 重复导致微应用挂载失败     
    app = createApp(App);     
    app.use(ElementPlus).use(router).use(store).mount(selectot);     
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {      
        app.component(key, component);     
    } 
}; 
const initQianKun = () => {     
    renderWithQiankun({         
        bootstrap() {             
            console.log('vite微应用：bootstrap');         
        },         
    mount(props) {             
        // 获取主应用传入数据             
        console.log('vite微应用：mount', props);             
        render(props);         
    },         
    unmount(props) {             
        console.log('vite微应用：unmount', props);             
        app.unmount();             
        app._container.innerHTML = '';             
        app = null;         
    },         
    update(props) {             
        console.log('vite微应用：update', props);         
    }     
    }); 
}; 
qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render(); // 判断是否使用 qiankun ，保证项目可以独立运行

4、修改route文件，采用history模式

const router = createRouter({     
    history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/qianZhang' : '/'),     
    routes: routes 
});

5、修改vite.config.js

import qiankun from 'vite-plugin-qiankun'; 
export default defineConfig(({ command, mode }) => ({     
    base: mode === 'development' ? './' : '/', 
    plugins: [ 
        qiankun('qianZhang', {// 微应用名字，与主应用注册的微应用名字保持一致  
            useDevMode: true         
        })     
    ],
    server: {
        host: 'localhost',
        port: 3000,
        origin: 'http://localhost:3000' //项目baseUrl，解决主应用中出现静态地址404问题
    }
})