1. 安装路由和配置路由,和往常一样,过程略 2. App.vue <template> <router-linkto="/">这里是主应用</router-link> <router-linkto="/vue">显示Vue微应用</router-link> <router-linkto="/angular">显示Angular微应用</router-link> <router-linkto="/react">显示React微应用</router-link> <!...
import{createRouter,createWebHashHistory}from'vue-router'import'../public-path'// 重点3: 引入public-path文件constrouter=createRouter({base:window.__POWERED_BY_QIANKUN__?'/vue':'/',// 重点4:qiankun进入子应用时,返回truehistory:createWebHashHistory(),// 重点5routes:[{path:'/',redirect:'/...
vue3优点就不再赘述了,反正就是很多(性能优化、优雅使用上ts、Composition API...),最主要的能使用前沿的技术架构,这是每一位技术的执念。 怎么样无感知切换到使用vue3开发成了当前的问题,前段时间有同事提出了可以通过qiankun嵌入,okokok!那就是它了,在我们老项目中通过qiankun引入一个vue3子服务来写业务模块,...
在使用qiankun结合Vue3主项目和Umi4子项目时,遇到路由跳转至子项目后主项目提示 404 的问题,通常是由于路由配置或者qiankun的生命周期钩子没有正确处理导致的。以下是一些可能的解决步骤: 确保子应用的base配置正确 在Umi 中,可以通过配置base来设置应用的公共路径。当子应用作为微前端的一部分时,这个base应该设置为空...
env.VUE_APP_API_URL_SPIDER, changeOrigin: true, pathRewrite: { '^/spider': '' } } } } 四、子应用 1、路由模式:history 路由(/router/index.ts) const router = createRouter({ // history模式 history: createWebHistory('/usercenter'),// 前缀需要和基座main.ts里面配置的激活路由一致 routes,...
}, // ... 其他 build 配置项 ... }, // ... 其他 Vite 配置项 ... }) } 请注意,这个示例假定您正在构建一个作为 qiankun 子应用的 Vue 3 + Vite 项目,并且只在生产模式下启用 vite-plugin-qiankun。此外,build.lib 和build.rollupOptions 配置是为了确保子应用可以被 qiankun 正确加载。 请根据...
:chapters*: 可以匹配所有子应用的路由 至此, 主应用基座部分配置完毕. 配置vue3[vite]子应用接入到微服务中 子应用不需要下载qiankun.js; 因现在qiankun.js暂不支持vite,尝试几遍后,果断使用轮子:vite-plugin-qiankun 下载轮子 https://github.com/tengmaoqing/vite-plugin-qiankun ...
这里以Vue3为例子,主应用和子应用均使用vue3 路由的话,建议主应用和子应用使用相同模式,即均为history或者均为hash 以下先使用为history模式讲解,最后会写如何使用hash模式。 History模式 主应用改造 一般情况下,我们会将带导航的layout的部分,直接放在主应用中。当然不是说不能拆,是能拆的,因为导航的layout明显是...
改写子应用 我们需要对子应用进行一些改写。我们以vue3为例,主要是修改入口文件的内容。 区分微前端环境和单独启动项目环境。在微前端环境下,主应用会在window全局环境下设置一个标志位用标识当前是微前端环境,我们可以通过这个标志位来区分微前端环境和单独启动项目环境 ...