使用vite+vue3创建qiankun微应用

qiankun的特点：兼容现有技术栈（vue/react/Angular/Jquery/Umi等），使用方便（和iframe一样方便），具有js,css隔离，资源预加载，但是虽然实现了各个子应用之间的样式隔离，但是基座和子应用之间的样式没有实现隔离。会出现基座和子应用的样式覆盖或者冲突。
注意的点：在基座项目中引入各个子组件时：

import { registerMicroApps, start } from 'qiankun';
const app =[
    {
      name: 'children1', // app name registered，子应用的名称
      entry: '//localhost:5175', //子应用的路径
      container: '#app1',//这个要注意：写基座项目的id名，不是子应用的！！！！！
      activeRule: '/children1',//匹配路由
    },
    {
      name: 'children2',
      entry: '//localhost:5176',
      // entry: { scripts: ['//localhost:7100/main.js'] },
      container: '#app1',
      activeRule: '/children2',
    },
  ]
registerMicroApps(app,{
    beforeLoad: [async app => console.log('before load', app.name)],
    beforeMount: [async app => console.log('before mount', app.name)],
    afterMount: [async app => console.log('after mount', app.name)],
});

start();

注意点1、基座的App.vue

<div id='app1'></div>

注意点2、在基座项目中写入对应的子应用的路由

  {
        path:'/children1',
        name:'children1',
        //component这个不需要！！！，因为在基座项目中做了配置，系统启动会自动匹配到对应子应用的首页
          // component:()=>import('../../../children2/src/components/HelloWorld.vue')
       
    },
    {
        path:'/children2',
        name:'children2',
      
    }

注意点3、在子应用中配置项vite.config.js中，server.origin 要和自己子应用中端口号对应

// https://vitejs.dev/config/
export default defineConfig({
  base: '/children1', // 和基座中配置的activeRule一致
 
  server:{
    host:'localhost',
    port:5175,
    open:true,
    cors:true,
    origin: 'http://localhost:5175' //注意点，和port值要一致

  },
  plugins: [vue(),
    qiankun('children1',{
      useDevMode: true
    })
  ],
 
})