京东微服务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子应用算是完美打通了


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

相关推荐
Java烘焙师1 小时前
架构师必备:业务扩展模式选型
mysql·elasticsearch·架构·hbase·多维度查询
掘金-我是哪吒1 小时前
分布式微服务系统架构第157集:JavaPlus技术文档平台日更-Java多线程编程技巧
java·分布式·微服务·云原生·架构
掘金-我是哪吒1 小时前
分布式微服务系统架构第155集:JavaPlus技术文档平台日更-Java线程池实现原理
java·分布式·微服务·云原生·架构
DemonAvenger2 小时前
TCP连接池设计与实现:提升Go应用网络性能
网络协议·架构·go
森焱森8 小时前
水下航行器外形分类详解
c语言·单片机·算法·架构·无人机
强哥之神14 小时前
英伟达发布 Llama Nemotron Nano 4B:专为边缘 AI 和科研任务优化的高效开源推理模型
人工智能·深度学习·语言模型·架构·llm·transformer·边缘计算
DemonAvenger14 小时前
高性能 TCP 服务器的 Go 语言实现技巧:从原理到实践
网络协议·架构·go
Code季风15 小时前
深入理解微服务中的服务注册与发现(Consul)
java·运维·微服务·zookeeper·架构·go·consul
光军oi15 小时前
java微服务(Springboot篇)——————IDEA搭建第一个Springboot入门项目
java·spring boot·微服务
小马哥编程15 小时前
【iSAQB软件架构】架构决策记录-ADR
数据库·架构·系统架构·设计规范