tencent / wujie Goto Github PK

问题描述：指南文档中，通信系统章节内的eventBus通信系统小节中api链接打开404
报错截图：

1. 文档位置：
   
2. eventBus api 页面报404：
   

子应用独立运行效果：

微前端环境，作为子应用：

我搭建了一个demo，开启路由同步后，路由后面始终会携带参数。当关闭路由同步后，demo中的效果暂时没发现有什么问题。所以想请教一下，如果关闭后会有什么问题？

主应用和子应用均为vite + vue3。

现在安装包重复依赖太多太慢，采用hoist模式又出现各种诡异现状，准备升级到pnpm + lerna

我的子应用接口通过配置nginx已经支持跨域访问，但是通过主应用访问还是提示跨域错误。单独访问子应用正常

子应用 alive设置为true
切换页面时还是会进入到wujie的window.__WUJIE_MOUNT __WUJIE_UNMOUNT中，
如果不生命周期改造 还是会重新加载
就是保活并没有生效

劫持子应用的滚动高度，指定子应用滚动到指定位置等相关api，让子应用无感知也无需特殊处理滚动相关问题

主应用通过点击菜单跳转子应用页面，路由同步开启。
当我再次点击主应用同样的菜单时，会改变路由，后面的参数丢了。

主应用、子应用均为vite+vue3。使用element plus， 菜单组件，开起路由模式

我这边有个特别的场景，需要在子应用中获取到主应用中某个DOM节点

以前项目未采用微前端方案时，是直接通过document.querySelector(xxx)，但是现在接入wujie后，我发现document.querySelector会从shadowRoot中找，这样以前代码就有bug

请问有什么好办法解决吗？
感谢

子应用使用module federation引用其它module federation类型模块报错，有支持的方式吗？[
Uncaught (in promise) ScriptExternalLoadError: Loading script failed. (missing: http://localhost:4000/remoteEntry.js) while loading "./react" from webpack/container/reference/lib-app while loading "./react-dom" from webpack/container/reference/lib-app

描述bug
window上的事件比如onload 和 document.write添加 script 标签无法生效

当前在做微前端框架选择，项目本身是vue2做主，ng1 ng2 vue2都有子，之前调研过qiankun，对于ng和ng1有一些不太友好的地方，恰巧这时候看到了无界，但是目前看下来好像没有什么具体产品验证，特此询问一下（没有别的意思，就是单纯问一下测试及验证的情况）

解决方案： 使用插件中的css-loader在运行时将相对地址代码替换成绝对地址, 这个具体替换的代码demo有吗？

子应用为vite开发模式:root样式没有转化成:host

描述bug
主应用为vue3时， wujie的createApp 与vue3的createApp 冲突了

背景

比如我们现在接的子应用内部有百度 sdk 需要忽略，由主应用统一处理，但是子应用内部的百度 sdk 1、2、3版本都有，而且有 query 等各种情况，那么我们想忽略，就必须把所有子应用链接的版本都收集到，比较麻烦。

期望

能 js-excludes 和 css-excludes 支持正则表达式和字符串两张形式

1、在入口preloadApp的时候写一遍子应用路由

2、在子组件里又要写一遍子应用路由

3、添加和修改的时候容易遗忘，漏改

入口

子组件

子应用 alive设置为true
切换页面时还是会进入到wujie的window.__WUJIE_MOUNT __WUJIE_UNMOUNT中，
如果不生命周期改造 还是会重新加载
就是保活并没有生效

目前子应用只是一个简单的单Vue应用，没有用vue-router、vuex、webpack等，但是组件没有渲染，iframe中可以正常显示
控制台没有任何报错

是index.html的内联js没有执行吗？

可不可以提供vite构建工具为主应用？

描述bug
IE11浏览器，在 creat-react-app 生成的 demo 项目下，引入 wujie-react，尝试渲染子应用，控制台显示 "EventTarget" 未定义

如何复现

1、第一步，通过 cra 生成最简demo项目
2、第二步，安装 creat-app-polyfill，在入口文件 index.js 中引入 “import "react-app-polyfill/ie11";”

3、第三步
改写 App 组件，注释无用css和图片等，保留 外层 div 结构，内部引入 wujie-react 组件
wujie-react 组件配置相关的 name 和 url（这里把 name和url 设置为同一个），width/height 100%

4、第四步，yarn build 打包项目，部署在本机 nginx，通过 IE11 浏览器进行访问

错误截图

错误代码定位在 common.ts 中的 EventTarget.prototype.addEventListen

最小复现仓库或者地址
重要！！！，请尽量给出复现仓库，这样能极大加快bug解决速度

DOMException: Blocked a frame with origin ***** from accessing a cross-origin frame
at getTargetValue (https://dev.g.alicdn.com/*********/***.js)

样式都有就是不显示

描述bug
element-ui dialog弹框里面写的下拉框el-select左右错位
左侧菜单栏是主应用，右侧是子应用；右侧里面的dialog弹框里面写的el-select下拉框错位 加了body{position:relative;}上下错位好了 但还是有左右错位问题

如何复现
给出详细的复现步骤
1、第一步 xxx
2、 第二步 xxx

错误截图

最小复现仓库或者地址
重要！！！，请尽量给出复现仓库，这样能极大加快bug解决速度

从主应用打开子应用，会默认打开子应用的首页

描述bug
在ANTV X6 使用中，会存在鼠标显示位置 和 操作位置不一致的问题

错误截图

子应用使用arco.design组件库打开弹窗会默认往body插入样式，导致我需要在子应用处理相关问题。在子应用中使用svg就会因为这个问题不出现。

描述bug
加载完子应用入口html后为何还要请求一次主应用host

话说，生产环境效果怎么样，有没什么坑啊

描述bug
script 文件声明的 var 变量，没有挂到 window 对象上，script 之间无法共享

如何复现
创建一个简单的文件，使用wujie加载报错
`

错误截图
如果有可以将截图带上

最小复现仓库或者地址
重要！！！，请尽量给出复现仓库，这样能极大加快bug解决速度

文件路径：wujie-core/utils.ts

函数体：fixElementCtrSrcOrHref
代码：new URL(value, this.baseURL || '')
当 value 不是合法的URL时，会报错，阻塞继续渲染
建议增加容错

示例：将子应用的url 设为 http://remons.cn/@website_pages/my

在主工程中，如何通过点击不同的菜单显示显示子工程不同的页面，菜单会添加到多页签中，方便切换

// Vue 2 / App.vue
<template>
    <div>
      [Test] img src
      <img src="./assets/logo.png" alt="">
    </div>
    <div>
      [Test] i background url
      <i class="icon-logo"></i>
    </div>
</template>
<style>
.icon-logo {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: url("./assets/logo.png") 0 0 / 100px 100px no-repeat;
}
</style>

子应用独立运行可以正确显示 i 标签的图片
但是在主应用里运行子应用的时候就失效了

代码在内网，不方便导出
初步排查报错的代码是 clappr 这个视频播放包
大佬们，有解决方案吗？

典型如 element ui

在兼容模式下，是不是没有必要让html和css运行在一个iframe内，js运行在另一个iframe内，直接让它们都运行在同一iframe内是最贴近原生和风险最小的方案

相对路径会访问主应用服务器端的

引入报这错，有人遇到吗
Uncaught DOMException: Blocked a frame with origin "http://localhost:8001" from accessing a cross-origin frame.

问题描述： 从GitHub仓库clone下来的代码，按照README文件本地开发中的步骤运行npm run start脚本，在Windows系统中无法正常启动example代码

环境信息：

• os 版本：Windows10
• npm 版本：8.11.0

报错截图：