1. 创建Vue3子应用项目 首先,使用Vue CLI创建一个新的Vue 3项目。如果尚未安装Vue CLI,可以使用以下命令安装: bash npm install -g @vue/cli 然后,创建一个新的Vue 3项目: bash vue create vue3-child-app 按照提示选择Vue 3作为项目版本。 2. 安装并配置qiankun 在Vue 3子应用项目中安装qiankun: ba...
// 1. 引入乾坤import qiankun from 'vite-plugin-qiankun' // 2. composePlugins方法中添加qiankun('vue-child', {useDevMode: true}), 重点mainjs配置 参考 import { createApp } from 'vue'import App from './App.vue'import router from './router'// pinia 仓库import { registerStore, useAppS...
import{ registerMicroApps, start }from'qiankun'; // 注册多个微应用 registerMicroApps( [ { name:'micro-app-vue', entry:'//localhost:8001', container:'#microAppContainer',// App.vue配置的节点 activeRule:'/vue', props: {}// 用于传参 }, { name:'micro-app-angular', entry:'//localho...
创建子服务容器 主服务增加router地址/qiankunVue3/*来承载vue3子项目,接入之后主服务所有/qiankunVue3的路由地址都将由子服务渲染。 下面代码省略了引入部分,导出的micoapp会合并到主服务的router.routes对象中 主服务增加一个routes对象: const qiankunVue3Layout = () => import(/* webpackChunkName: "mico...
1、主应用:依然沿用之前Vue2搭建的主应用 2、子应用:Vue3+vite 直接使用qiankun改造的问题 无法正确加载子应用,这个主要和vite构建方式有关 子应用改造(通过vite-plugin-qiankun插件改造) 1、安装 npm i vite-plugin-qiankun --save 2、vite.config.ts 改造 ...
核心逻辑 判断是否在乾坤框架中 否安装正常方式挂载 是不进行app挂载,而是通过乾坤暴露的mount方法挂载 main.ts文件 qiankun.ts 主应用:https:/...
4.6、vue3-vite主应用 接入 jQuery子应用 不要对 iframe 抱有偏见,它也是微前端的一种实现方式,如果页面上无弹窗、无全屏等操作,iframe 也是很好用的。配置缓存和 cdn 加速,如果是内网访问,也不会很慢。 iframe 和 qiankun 可以并存,jQuery 多页应用使用 iframe 接入就挺好,什么时候什么场景该用哪种方案,具体...
vue(),qiankun('vue3', { useDevMode: true})], server: { ...,headers: {'Access-Control-Allow-Origin': '*', // 主应用获取子应用时跨域响应头}, } }) 3. 入口文件:main.ts中添加 导出生命周期配置以及qiankun环境变量判断 renderWithQiankun: 为子应用导出一些生命周期函数 供主应用在特殊的时...
qiankun+vue3主项目umi4子项目,子项目成功加载但是在render的下一帧就404了,或许是路由配置有问题。我像这样注册了我的umi子项目进行测试:这便是umi子项目sub-app-2的.umirc.ts中的配置:由于我选用了一个开源...