第一步、创建vue3的项目与正常创建项目无异,在这里不做过多描述; 第二部、将创建好的vue3项目作为主应用,在根目录先安装qiankung yarn add qiankun # 或者 npm i qiankun -S 1 第三步、修改src目录下面的main.js import { createApp } from 'vue' import App from './App.vue' import router from ...
在使用 qiankun 进行微前端架构时,如果主应用和微应用之间存在重复的依赖,可以通过一些配置来共享这些依赖,避免重复加载。以下是如何在 qiankun+vue3 的环境中实现依赖共享的步骤: 1. 确认 qiankun 与 vue3 的集成环境已正确搭建 确保你的主应用和微应用都已经正确集成了 qiankun,并且能够通过 qiankun 进行加载和...
{name:'qiankun_child1',entry:'http://xxx.xxx.xxx.xxx:xxx',// 子应用的访问地址container:'#child1',activeRule:'child1', }, ]); // 在主应用中添加子应用路由页面,主应用router/index.ts的router中加入:{ path:'/child1/:pathMatch(.*)', name:'child1', component: () =>import('../...
{path:'/meeting/:pathMatch(.*)*',name:'乾坤框架',meta:{keepAlive:false,microApp:true},component:()=>import('../views/qiankun/index.vue')})constrouter=createRouter({history:createWebHistory(process.env.BASE_URL),routes})router.beforeEach((to)=>{start()})router.afterEach(()=>{close(...
子应用: vite + vue3 + ts 搭建步骤 - 主应用: 1. 安装qiankun yarn add qiankun 2.在入口文件中 注册子应用路由 (也可以单独写一个文件,在入口文件中调用) import { registerMicroApps, start } from 'qiankun'const loader= (loading:boolean) =>{ ...
在使用qiankun结合Vue3主项目和Umi4子项目时,遇到路由跳转至子项目后主项目提示 404 的问题,通常是由于路由配置或者qiankun的生命周期钩子没有正确处理导致的。以下是一些可能的解决步骤: 确保子应用的base配置正确 在Umi 中,可以通过配置base来设置应用的公共路径。当子应用作为微前端的一部分时,这个base应该设置为空...
1、主应用:依然沿用之前Vue2搭建的主应用 2、子应用:Vue3+vite 直接使用qiankun改造的问题 无法正确加载子应用,这个主要和vite构建方式有关 子应用改造(通过vite-plugin-qiankun插件改造) 1、安装 npm i vite-plugin-qiankun --save 2、vite.config.ts 改造 ...
主应用basic-vue-app(vue3+vite) 安装qiankun 代码语言:javascript 复制 npm install qiankun 新建src/qiankun/index.js文件,进行单独的抽离 代码语言:javascript 复制 import { registerMicroApps, start } from 'qiankun' registerMicroApps([ { name: 'vue-app', // 必须与微应用注册名字相同 entry: 'http...
通常,qiankun 的配置可能只需要访问 mode 来确定是否为生产环境或其他环境应用不同的配置。因此,您可以在现有的 export default 函数中处理 qiankun 相关的配置。 这里是一个合并后的 vite.config.ts 示例: // https://vitejs.dev/config/ import { defineConfig } from 'vite' import vue from '@vitejs/...
1 配置主应用 新建一个文件夹qiankun-front cdqiankun-front vue create maincdmain npm install vue-router -s npm install qiankun -s 2 配置主应用的路由 2.0 修改挂载id 因为有多个项目,如果不修改,id会重复,所以修改index.html和main.js文件