接入vue2项目和vue3项目对应路由模式分别是hash和history主应用主应用是基于vue3开发的一个门户网站,仅有登录以及门户列表。基于路由配置方式通过将微应用关联到一些 url 规则的方式,实现当浏览器 url 发生变化时,自动加载相应的微应用的功能。安装qiankun npm i qiankun -S # 或者 yarn add qiankun 在主应用中...
vue3优点就不再赘述了,反正就是很多(性能优化、优雅使用上ts、Composition API...),最主要的能使用前沿的技术架构,这是每一位技术的执念。 怎么样无感知切换到使用vue3开发成了当前的问题,前段时间有同事提出了可以通过qiankun嵌入,okokok!那就是它了,在我们老项目中通过qiankun引入一个vue3子服务来写业务模块,...
container:"#yourContainer",//子系统要挂载到父页面的容器节点,类似iframe activeRule:"/child-site",//这里要注意的是qiankun没有自己的路由,如果你是react就要借助react-router,如果你是vue就要借助vue-router去实现匹配 }, ]);//预加载子应用start(); 这是路由部分,本处用的是vue-router V4.X: import ...
createWebHistory}from"vue-router";constroutes=[{path:"/",component:HelloWorld},{path:"/about",component:HelloWorld2},];constrouter=createRouter({history:createWebHistory(window.__POWERED_BY_QIANKUN__?"/vue3":"/"),routes,});exportdefaultrouter;...
1. Vite 是什么,以及它在 Vue3 项目中的作用 Vite 是一个面向现代浏览器的前端构建工具,由 Vue.js 作者尤雨溪开发。它利用原生 ES 模块导入(ESM)来提供极速的开发服务器和热模块替换(HMR),从而显著提升开发体验。在 Vue3 项目中,Vite 能够实现快速启动、即时模块热更新以及优化打包,极大地提高了开发效率和项目...
在vue.config.js 中,进行改造 [开始之前] 先使用vue3 + vue-cli 创建两个项目 主应用和子应用 最好使用同一版本的组件库,不然可能报错,或产生样式问题 [开始啦] 安装qiankun,我这里安装的是qiankun@2.10.16 主应用: 增加路由配置 import{RouteRecordRaw}from"vue-router"exportconstroute:RouteRecordRaw={path...
qiankun+vue3主项目umi4子项目,子项目成功加载但是在render的下一帧就404了,或许是路由配置有问题。 我像这样注册了我的umi子项目进行测试: 这便是umi子项目sub-app-2的.umirc.ts中的配置: 由于我选用了一个开源的叫做like-admin的一个Vue3项目作为基座,它的菜单和路由结构是类似这样: ...
简介:微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用 一、了解qiankun.js qiankun - qiankun 1.1、简单,任意 js 框架均可使用。微应用接入像使用接入一个iframe系统一样简单,但实际不是 iframe。 1.2、完备,几乎包含所有构建微前端系统时所需要的基本能力,如 样式隔离、js 沙箱、预加载等...
1、主应用:依然沿用之前Vue2搭建的主应用 2、子应用:Vue3+vite 直接使用qiankun改造的问题 无法正确加载子应用,这个主要和vite构建方式有关 子应用改造(通过vite-plugin-qiankun插件改造) 1、安装 npm i vite-plugin-qiankun --save 2、vite.config.ts 改造 ...
qiankun 2.6.3 三. 实践 1. 架构 架构图 如上图所示,微服务架构将会由多个节点构成,首先由一个主节点site_base连接所有子节点,子节点可以不断拓展。 2. 主节点 主节点源码可见于github.com/Kuari/Blog/t 创建主节点,选择vue3+ts vue create site_base cd site_base 安装qiankun yarn add qiankun 在src/...