2. 导入并启用微前端框架 microApp src/main.ts AI检测代码解析 import microApp from '@micro-zoe/micro-app' microApp.start() 1. 2. 3. 3. 添加配置 vite.config.ts 的 vue 中添加配置 AI检测代码解析 vue({ template: { compilerOptions: { isCustomElement: (tag) => /^micro-app/.test(tag)...
用vite,图片资源放在public下面,使用绝对地址引用图片 子应用在public文件夹中新建assets文件夹,在assets文件夹下建一个vite1 文件夹,静态资源放置于此 主应用开发环境使用proxy,线上环境使用nginx转发 子应用使用组件插槽或者pinia,路由懒加载报错问题 小项目几个路由加载页面不使用懒加载, 大项目中懒加载的时候不要使用...
1. 第一步,创建2个vue3+vite项目 创建【main-vue3-app】主系统,以及【child-vue3-app】子系统。 然后就是安装 vue-router、sass依赖,里面代码敲敲敲,再把主、子系统跑起来。 ps: 主系统访问ip端口:http://127.0.0.1:1111/ 子系统访问ip端口:http://127.0.0.1:2222/child-vue3/ 好,第一步把这个基石...
1、依然使用推荐框架 vite + vue3 等基础框架做试用 2、下载依赖 AI检测代码解析 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,各位小伙伴若基于本博客使用,注意...
vite+vue+micro-app 配置分为两部分,主应用也就是基座应用,子应用部分:基座应用:入口文件main.js,映入微前端引擎micro-app启动微前端。此处的loader的作用是因为vite开发模式下引入的资源是相对路径,但是子应用也是vite的情况下,主应用加载资源的时候就会以主应用为域名去加载,加载不到子应用的资源,所以无法...
本文实现的是vite+vue3+Microapp为主应用,vue2+element为子应用的微前端 一、创建项目 1. 创建vite+vue3+Microapp主应用: # 全局安装vite npm install -g vite # 指定目录,创建vite+vue3+Microapp主应用 cd your-project-directory vite create my-microapp --template vue-ts ...
第一步:创建一个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() 第五步:父工程配置路由(非严格匹配写法:pathMa...
(3)会话管理 (4)路由、菜单管理 (5)主题管理 (6)共享依赖 (7)多语言管理(最重要的一点) content里面可以任意放不同技术的子应用,只需要开发一个主应用(主应用也可以自由选择语言,目前支持react、vue、vite、angular、next.js、nuxt.js),将一些分散的应用接进来,主应用还可以通过控制权限,让不同的账号看到的...
1 回答1.6k 阅读✓ 已解决 vue3+vite为基座,vue2为子应用,使用的是qiankun,为什么加载子应用的时候会出现跨域的错误? 1 回答2.9k 阅读 Vite+vue3+Router4 在事件中添加子路由,切换到添加的子路由,会提示警告,切换到其他路由就报错? 1 回答2.3k 阅读✓ 已解决 找不到问题?创建新问题思否...
本文为你提供一套大型中台项目构建、多技术栈项目融合的最佳落地方案,并结合主流微前端框架MicroApp,流行技术栈Vue3、React18、Nuxt2、Vue2、Vite、Webpack最终聚合实现多个子应用的大型招聘网站,助力你成长为独当一面、具备team leader潜质的前端高级工程师。