Wujie官网
Vite官网
Vue3官网
当前安装的版本
"vue": "^3.2.37"
"wujie-vue3": "^1.0.29"
"vite": "^2.9.14"
因为wujie要求node版本为18以下，所以vue要安装3.2版本，否则报错。
项目准备
主项目 vue3 + vite
子项目 其他版本都可，对子项目入侵几乎没有
- 安装插件
npm i wujie-vue3 -S - 新建WujieVue.vue文件作为wujie容器
<template>
<!-- name 唯一的id 后续的操作用这个作为凭证 一般用页面的path做name -->
<!-- url 嵌入的子项目的页面的地址 -->
<WujieVue
width="100%"
height="100%"
name="唯一的key"
url="http://localhost:9921/"
/>
</template>
<script setup>
import WujieVue from "wujie-vue3";
</script>
- 配置数据
在保证嵌入的子项目的页面不跨域的情况下，只要给上面的url传递相应的需要嵌入的地址，基本就能在主项目中看到当前的页面了。
本地可以如上面 http://localhost:9921/
也可以用 ant.design/components/… 测试 - 传递给子项目数据(使用props)
直接在组件上传递
<WujieVue
width="100%"
height="100%"
name="唯一的key"
url="http://localhost:9921/"
:props="{ data: 1111 }"
/>
通过配置传递
<script setup>
import WujieVue from "wujie-vue3";
const { setupApp, preloadApp, bus } = WujieVue;
setupApp({
name: "唯一的key", // 要和组件上面的name保持一致，否则找不到下游，配置不生效
props: {
data: "传递给子项目的数据",
},
});
</script>
wujie tips
wujie中name要保持一致，否则下级无法获取上级写的配置
setupApp, preloadApp, startApp, destroyApp 以及 <WujieVue />组件，上面的name要保持一致，否则传递的数据，下级获取不到。如传递的props等...
问题汇总
问题1：主应用和子应用部署在不同的服务，主应用获取子应用index.html会报跨域
在主应用hostMap文件中，最初是把本地对应的地址直接写成了子应用的服务器地址，就会报跨域。
解决方法：将子应用配置成和主应用相同的域名。
问题2：获取子应用index.html后，获取其中的js和css文件，会提示404
因为是新项目，在子应用的vite.config.js中未配置base（默认值是’/'）
由于子应用挂在主应用下，所有的请求都是主应用发起，所以这种路径会在主应用的服务器去找这两个文件。
解决方法：在子应用vite.config.js中配置base: “./”
问题3：解决以上两个问题后，子应用资源能够正常加载，但是主应用会卡住，直到卡崩浏览器
控制台不报错，资源也不跨域，但是浏览器就是卡住了。后来灵光一现，在wujie文档中看到了preloadApp的警告：资源的预执行会阻塞主应用的渲染线程。
解决方法：主应用的main.ts中的setupApp和preloadApp，url就传个’’
问题4：解决以上3个问题，线上能跑起来了，子应用配置在root中的css不生效
因为子应用挂在主应用上后，:root就变成了主应用的，所以子应用的样式不再生效
解决方法：使用主应用setupApp子应用的plugins属性中的cssLoader，
