micro-app icon indicating copy to clipboard operation
micro-app copied to clipboard

Vue2 子应用构建后部署时,沙盒类型设置iframe才能正常渲染

Open alandingbc opened this issue 1 year ago • 0 comments

问题描述

如题,Vue2项目正常dev环境开发时,micro-app组件没有配置iframe可以正常渲染子应用,但是build部署之后,出现异常,必须添加沙盒类型iframe才能正常渲染

同时追问:

  1. 参考了源码中dev目录中vue2 demo,发现主应用也添加了iframe 配置项 <micro-app iframe>,但是不是所有demo都配置iframe,请问iframe使用的标志是什么?官网文档首次中,仅提到vite构建需要使用iframe,与实际开发情况并不相同。
  2. 另外就是跟踪issues时发现,也有不少人反馈vue dev开发模式下,不添加iframe沙盒配置项没有问题,但是一旦构建部署就会出现,是否可以针对该问题在文档或者特殊问题中做一下说明。

复现步骤

  1. 主应用默认不配置iframe,<micro-app>
  2. 构建部署部署访问,无错误信息,但是子应用不渲染,<micro-app-body></micro-app-body>标签内部为空,但是<micro-app-header>有对应的资源标签
  3. 主应用添加iframe 配置,<micro-app iframe>
  4. 构建部署部署访问,子应用正常渲染,<micro-app-body>标签内部正常渲染基于vue的dom元素

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。 image

image

复现仓库

请提供一个精简的代码仓库,然后上传到自己的 github,以帮助我们复现您的问题。 抱歉无法提供代码仓库,代码结构和源码dev中结构类似

环境信息

  • micro-app版本:1.0.0-rc.5
  • 主应用前端框架&版本:vue 2.7.16 ; vue-router 3.5.1
  • 子应用前端框架&版本:vue 2.7.16 ; vue-router 3.5.1
  • 构建工具&版本:vue/cli-service 5.0.8

alandingbc avatar Sep 19 '24 08:09 alandingbc