使用vite+vue3创建qiankun微应用

最新推荐文章于 2024-07-31 09:17:50 发布

weixin_47389477

最新推荐文章于 2024-07-31 09:17:50 发布

阅读量644

点赞数 1

文章标签： javascript qiankun 微应用前端

本文链接：https://blog.csdn.net/weixin_47389477/article/details/131601267

版权

qiankun是一个兼容现有技术栈如Vue、React、Angular等的微前端框架，它提供了便捷的子应用接入方式，具有JS和CSS隔离以及资源预加载功能。然而，基座与子应用间的样式隔离是其不足之处，可能会导致样式冲突。配置时需注意子应用的entry、container和activeRule设置，以及在基座项目中配置对应的路由和子应用服务器的origin属性。

摘要由CSDN通过智能技术生成

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
    })
  ],
 
})