京东微服务microApp使用总结

前言

基于现有业务门户进行微服务基础平台搭建

主应用框架:vue3+vite

子应用框架:vue2+webpack / vue3+vite在这里插入代码片

本地调试即可:主应用+子应用进行打通(注意:两者都是vue3+vite)

问题总结

1.嵌入问题

vite作为子应用只需要切换到iframe沙箱

1.通信问题

主应用


子应用接收

子应用嵌入其他插件:比如百度地图会出现跨域问题

解决方案:主应用安装地图插件

yarn add @micro-zoe/micro-plugin-map --dev

javascript 复制代码
import microApp from '@micro-zoe/micro-app'
import microPluginMap from '@micro-zoe/micro-plugin-map'

  // 设置为全局插件,作用于所有子应用
  microApp.start({
    plugins: {
      global: [microPluginMap],
    }
  })
  // 或者设置为某个子应用的插件,只作用于当前子应用
  microApp.start({
    plugins: {
      modules: {
        'appName': [microPluginMap],
      }
    }
  })

我这边采用的是全局配置,配置好就不会出现跨域了,但是又一个新的问题出现:子应用找不到引入的百度地图sdk,看了官网发现,这个sdk文件是需要主应用引入(注意:就在index.html使用script正常引入就行),子应用调主应用的sdk,这时候问题又来了,子应用在沙箱环境里怎么访问主应用的全局变量(看第二张图片),到这里,问题完美解决,主应用与vue3+vite子应用算是完美打通了


今天先写到这里吧,后面有新问题再补充。。。。。

相关推荐
指月小筑7 小时前
K8s 自定义调度器 Part1:通过 Scheduler Extender 实现自定义调度逻辑
云原生·容器·kubernetes·go
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
?ccc?8 小时前
Kubernetes 架构原理与集群环境部署
容器·架构·kubernetes
秋千码途10 小时前
小架构step系列17:getter-setter-toString
java·开发语言·架构
Ashlee_code11 小时前
美联储降息趋缓叠加能源需求下调,泰国证券交易所新一代交易系统架构方案——高合规、强韧性、本地化的跨境金融基础设施解决方案
java·算法·金融·架构·系统架构·区块链·需求分析
zkmall12 小时前
ZKmall开源商城架构助力增长:多端流量聚合与用户体验
架构·开源·ux
喝拿铁写前端12 小时前
技术是决策与代价的平衡 —— 超大系统从 Vue 2 向 Vue 3 演进的思考
前端·vue.js·架构
秋千码途13 小时前
小架构step系列14:白盒集成测试原理
java·架构·集成测试
向上的车轮14 小时前
SQLite技术架构解析,适用场景有哪些?
数据库·架构·sqlite
Ashlee_code14 小时前
裂变时刻:全球关税重构下的券商交易系统跃迁路线图(2025-2027)
java·大数据·数据结构·python·云原生·区块链·perl