用vite,图片资源放在public下面,使用绝对地址引用图片 子应用在public文件夹中新建assets文件夹,在assets文件夹下建一个vite1 文件夹,静态资源放置于此 主应用开发环境使用proxy,线上环境使用nginx转发 子应用使用组件插槽或者pinia,路由懒加载报错问题 小项目几个路由加载页面不使用懒加载, 大项目中懒加载的时候不要使用...
采用vite + vue3 + elementPlus 作为整个核心的技术栈: vite + vue3 + elementPlus 作为基座应用,即父应用 vite + vue3 + elementPlus 作为最佳推荐子应用 要支持 原生 h5+css3 子应用支持 要支持 angular 子应用支持 要支持子应用使用 iframe 组件 只有不忘初心,才能方得始终! 二、microApp 试用 1、依然...
url:必传参数,必须指向子应用的 index.html 子应用为 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...
5. 兼容 vite 6. 开发工具 一行代码嵌入 MicroApp 借鉴了 WebComponent 的思想,通过 CustomElement 结合自定义的 ShadowDom,将微前端封装成一个类 WebComponent 组件,实现微前端的组件化渲染。在此基础上,通过实现 JS 隔离、样式隔离、路由隔离,降低子应用的接入成本,子应用只需设置允许跨域请求,不需要改动任何代码...
vite作为子应用需要配置以下 主应用入口 importmicroAppfrom'@micro-zoe/micro-app';microApp.start({plugins:{modules:{// 此处的appname-vite必须和 <micro-app name='appname-vite' url="http://localhost:5001/vite-vue3-ts/"></micro-app> 一致'appname-vite':[{// loader的作用是因为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...
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. ...
content里面可以任意放不同技术的子应用,我们只需要开发一个主应用(主应用也可以自由选择语言,目前支持react、vue、vite、angular、next.js、nuxt.js),将一些分散的应用接进来,主应用还可以通过控制权限,让不同的账号看到的菜单不一样,即看到不同系统的页面,通过同一个地址访问到不同的子应用。
vite+vue+micro-app 配置分为两部分，主应用也就是基座应用，子应用部分：基座应用：入口文件main.js,映入微前端引擎micro-app启动微前端。此处的loader的作用是因为vite开发模式下引入的资源是相对路径，但是子应用也是vite的情况下，主应用加载资源的时候就会以主应用为域名去加载，加载不到子应用的资源，所以无法...