子应用在public文件夹中新建assets文件夹,在assets文件夹下建一个vite1 文件夹,静态资源放置于此 主应用开发环境使用proxy,线上环境使用nginx转发 子应用使用组件插槽或者pinia,路由懒加载报错问题 小项目几个路由加载页面不使用懒加载, 大项目中懒加载的时候不要使用pinia或者组件中不适用 主应用为了美观重写菜单 Header...
微前端模式下,通常由基座负责设置站点标题,不希望受到子应用的干扰。 但是因为 microApp 对 documet 的代理处理过程,并没有处理 document.title,所以子应用中可能通过 document.title = 'xxx' 意外改变了基座的站点标题。 解决方式: 通过customProxyDocumentProps 对 document 的属性进行自定义代理扩展 ...
//预发环境环境子应用的路由前缀};}exportdefaultconfig;//以上是config.ts文件的全部---end//菜单点击事件里面的内容history.push('/yp');//切换到子应用setTimeout(()=>{microApp.router.push({
microApp.router.push({name:'yp',//和子应用的name要保持一致,为了匹配到对应子应用的路由path:`${config.yp}${item.url}`, });//跳转子应用的路由,其中config是上面的配置文件,根据不同的环境取对应环境的子应用,item是当前点击的菜单路径信息},500); 这里解释下为啥要用setTimeout,首先通过history.push...
(2)MicroApp 优势 1、使用起来成本最低,将所有的封装到一个类 WebComponent 组件中,从而实现在主应用基座中嵌入一行代码即可渲染一个微前端应用。 2、不需要像 single-spa 和 qiankun 一样要求子应用修改渲染逻辑并暴露出方法,也不需要修改 webpack 配置,是目前市面上接入微前端成本最低的方案。
"@micro-zoe/micro-app": "^1.0.0-alpha.7" (4)在入口引入我们的micro-app 首先在根目录下创建一个global.tsx文件 import microApp from '@micro-zoe/micro-app' microApp.start() (5)在主应用引入子应用 a. 分配一个子应用路由 { path: '/yp', ...
**(2)**MicroApp 优势 1、使用起来成本最低,将所有的封装到一个类WebComponent组件中,从而实现在主应用基座中嵌入一行代码即可渲染一个微前端应用。 2、不需要像 single-spa 和 qiankun 一样要求子应用修改渲染逻辑并暴露出方法,也不需要修改webpack配置,是目前市面上接入微前端成本最低的方案。
(4)在入口引入我们的micro-app 首先在根目录下创建一个global.tsx文件 import microApp from '@micro-zoe/micro-app' microApp.start() (5)在主应用引入子应用 a. 分配一个子应用路由 { path: '/yp', name: 'yp', linkHidden: true, linkDisable: true, ...
在micro-app架构中,主应用和子应用之间的通信可能会受到跨域策略的限制。 micro-app中常见的跨域处理方法 开发环境配置: 在开发环境中,通常使用webpack-dev-server或类似的工具来运行子应用。可以通过配置这些工具的headers来允许跨域请求。 生产环境配置: 在生产环境中,通常使用nginx或其他反向代理服务器来配置跨域...
console.log('来自 vite 子应用的数据', e.detail.data) } function jumpToHome () { microApp.router.push({name: 'vite', path: '/micro-app/vite/'}) } function jumpToPage2 () { microApp.router.push({name: 'vite', path: '/micro-app/vite/#/page2'}) microApp.router.push({name:...