在Vue3项目中使用micro-app进行微前端开发,可以遵循以下步骤: 1. 安装micro-app 首先,你需要在主应用(基座应用)中安装micro-app。你可以使用npm、yarn或pnpm进行安装: bash npm install @micro-zoe/micro-app --save # 或者 yarn add @micro-zoe/micro-app # 或者 pnpm add @micro-zoe/micro-app 2. 在...
* 当前vue-router版本:4.0.12*/functionfixBugForVueRouter4(router: Router) {//判断主应用是main-vue3或main-vite,因为这这两个主应用是 vue-router4if(window.__MICRO_APP_ENVIRONMENT__) {//if (window.location.href.includes('/main-vue3') || window.location.href.includes('/main-vite')) {/...
3. 添加配置 vite.config.ts 的 vue 中添加配置 vue({ template: { compilerOptions: { isCustomElement: (tag) => /^micro-app/.test(tag) } } }), 1. 2. 3. 4. 5. 6. 7. 4. 页面引入子应用 <micro-app name="childApp1" url="http://127.0.0.1:5174/" iframe></micro-app> 1. n...
子应用在public文件夹中新建assets文件夹,在assets文件夹下建一个vite1 文件夹,静态资源放置于此 主应用开发环境使用proxy,线上环境使用nginx转发 子应用使用组件插槽或者pinia,路由懒加载报错问题 小项目几个路由加载页面不使用懒加载, 大项目中懒加载的时候不要使用pinia或者组件中不适用 主应用为了美观重写菜单 Header...
(3)会话管理 (4)路由、菜单管理 (5)主题管理 (6)共享依赖 (7)多语言管理(最重要的一点) content里面可以任意放不同技术的子应用,只需要开发一个主应用(主应用也可以自由选择语言,目前支持react、vue、vite、angular、next.js、nuxt.js),将一些分散的应用接进来,主应用还可以通过控制权限,让不同的账号看到的...
qiankun，出身名门的微前端，基于single-spa来实现的，但是把那些繁杂的配置包装一层，使其简单易用，但是它没想到vite的出现，所以对于vite+vue3来说配置需要踩得坑太多了，险些爬不起来。。。micro-app、今天的主角，借鉴了WebComponent的思想，通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类Web...
3年前 README 第一步:创建一个vite+vue3的父工程项目 npm init vite-app micro-app-vite-vue3.0 第二步:安装micro-app的依赖 npm i @micro-zoe/micro-app --save 第四步:main.js中引入插件,并开启 import microApp from '@micro-zoe/micro-app' microApp.start() 第五步:父工程配置路由(非...
微前端是将多个不同的 web 应用融合在一起渲染,但浏览器只有一个路由系统,这很容易造成应用之间的路由冲突,最常见的就是 vue3 的路由冲突问题。 上面是 vue-router 作者对于在微前端环境下的冲突问题的回答,他认为 vue-router 已经覆盖足够多场景,微前端的问题应该由微前端解决。 在我们刚开源时,并没有对路由...
1、依然使用推荐框架 vite + vue3 等基础框架做试用 2、下载依赖 yarnadd@micro-zoe/micro-app--save 1. 当时笔者使用的版本是:@micro-zoe/micro-app@1.0.0-rc.4,后面为了解决一些问题(后述博客会有提及),增加了版本到@micro-zoe/micro-app@1.0.0-rc.5,各位小伙伴若基于本博客使用,注意版本差异哦 ...
* 相关issue:https://github.com/micro-zoe/micro-app/issues/155 * 当前vue-router版本:4.0.12 */ function fixBugForVueRouter4 (router: Router) { // 判断主应用是main-vue3或main-vite,因为这这两个主应用是 vue-router4 if (window.location.href.includes('/main-vue3') || window.location....