admin 管理员组

文章数量: 1184232

qiankun

项目结构

主应用： vue3 + vite
子应用1：vue3 + vite

背景介绍

项目采用了vue3+vite构建的，又因为qiankun不支持vite，所以需要引用 vite-plugin-qiankun 插件来解决

主应用–改造

  1. 安装 qiankun
npm install qiankun

  1. 重新定义一个启动端口，防止和其它子应用共用同一个端口

  2. 定义子应用在主应用中的出口，下面这两个地方都需要进行定义

  3. 路由定义，对应的路由与子应用的路由相对应，但是主应用对应子应用的路由前面要加一个标识，用于找到对应的子应用

  4. 定义主应用和子应用对应的项目名字以及服务路由

子应用1–改造

  1. 安装插件，因为乾坤不支持vite，所以需要安装第三方插件 vite-plugin-qiankun
npm install vite-plugin-qiankun
  1. 服务配置，引用 vite-plugin-qiankun 并设置一个唯一的端口号以及名字
  2. 在main.js 里面添加qiankun 生命周期钩子
    注意： 这里需要注意的是 qiankun 使用的是 “window.POWERED_BY_QIANKUN” 判断是否在子应用环境中，而插件使用的是 "qiankunWindow.POWERED_BY_QIANKUN"进行判断
  3. 路由改造

本文标签： qiankun

版权声明：本文标题：qiankun 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687529989a112641.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。