用vite,图片资源放在public下面,使用绝对地址引用图片 子应用在public文件夹中新建assets文件夹,在assets文件夹下建一个vite1 文件夹,静态资源放置于此 主应用开发环境使用proxy,线上环境使用nginx转发 子应用使用组件插槽或者pinia,路由懒加载报错问题 小项目几个路由加载页面不使用懒加载, 大项目中懒加载的时候不要使用...
子应用为 vite 时,需添加 iframe 5. 启动主应用 最终效果如下
//@ts-ignore 因为vite子应用关闭了沙箱,我们需要为子应用appname-vite创建EventCenterForMicroApp对象来实现数据通信 // 这个name 就是<micro-app :name="name" /> 上的name值 import { EventCenterForMicroApp } from '@micro-zoe/micro-app'; window.eventCenterForAppNameVite =newEventCenterForMicroApp(name...
入口文件main.js,映入微前端引擎micro-app启动微前端。此处的loader的作用是因为vite开发模式下引入的资源是相对路径，但是子应用也是vite的情况下，主应用加载资源的时候就会以主应用为域名去加载，加载不到子应用的资源，所以无法执行；需要处理子应用静态资源，写一个简易的插件，对开发环境的子应用进行处理，补全静态...
import microApp from '@micro-zoe/micro-app'; microApp.start({ plugins: { modules: { //咱们的子应用是vite项目,在这配置 'appname-vite': [ { loader(code: string) { if (process.env.NODE_ENV === 'development') { // 这里 /basename/ 需要和子应用vite.config.js中base的配置保持一致 cod...
5. 兼容 vite 6. 开发工具 一行代码嵌入 MicroApp 借鉴了 WebComponent 的思想,通过 CustomElement 结合自定义的 ShadowDom,将微前端封装成一个类 WebComponent 组件,实现微前端的组件化渲染。在此基础上,通过实现 JS 隔离、样式隔离、路由隔离,降低子应用的接入成本,子应用只需设置允许跨域请求,不需要改动任何代码...
vite.config.js 中转路由, MicroApp组件封装 8个月前 yarn.lock vite模版项目 2年前 README Vue 3 + Vite Recommended IDE Setup Vue 3 + Vite This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3SFCs, check out thescript setup docsto learn more. ...
npm create vite@latest main-app -- --template vue-ts 📌But:因为MicroApp使用的是 CustomElement,使用的时候与普通 dom 元素一致,在主应用配置路由时最好使用一个空白组件来放置子应用 这样,先创建一个简单的路由配置和对应页面 // router.tsimport { createRouter, createWebHistory } from "vue-router"...
content里面可以任意放不同技术的子应用,只需要开发一个主应用(主应用也可以自由选择语言,目前支持react、vue、vite、angular、next.js、nuxt.js),将一些分散的应用接进来,主应用还可以通过控制权限,让不同的账号看到的菜单不一样,即看到不同系统的页面,通过同一个地址访问到不同的子应用。
第一步:创建一个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...