Repository navigation
请问微应用挂载不上是什么原因呢 #838
Description
Activity
错误信息说的是,没有容器节点,检查一下你的版本,看看对应的文档排查一下
同款问题, 时好时坏
意思是vueApp微应用加载的时候, 没有找到挂载节点#vue
找到问题了 子应用和父应用渲染的都是#app
Reacted by GS-Sharon找到问题了 子应用和父应用渲染的都是#app
求分享一下解决思路
找到问题了 子应用和父应用渲染的都是#app
求分享一下解决思路
子应用和父应用不要挂载在一个dom上,应该是父子关系
找到问题了 子应用和父应用渲染的都是#app
求分享一下解决思路
子应用和父应用不要挂载在一个dom上,应该是父子关系
试过这个方案了,无效。
尝试过的无效方案
方案一:
父应用的index.html使用<div id="root-app"></div>,子应用的index.html使用<div id="app"></div>,即上面所说的父子节关系方案,试过了无效。方案二:
父应用mounted后再调用registerMicroApps注册子应用,也无效。父应用main.jsnew Vue({ render: h => h(App), mounted: () => { console.log('subapp-viewport', document.querySelector('#subapp-viewport')) registerMicroApps([ { name: 'app', ... } ], { }); start(); }, }).$mount('#root-app');这句代码
console.log('subapp-viewport', document.querySelector('#subapp-viewport'))能正常获取到dom,说明此时已经有了dom了,但仍报Uncaught Error: application 'xxxx' died in status SKIP_BECAUSE_BROKEN: [qiankun] Target container with #subapp-viewport not existed while yunying mounting!Uncaught Error: application 'xxxx' died in status SKIP_BECAUSE_BROKEN: [qiankun] Target container with #subapp-viewport not existed while yunying mounting!这个问题是生产环境清空缓存后首次进入页面时才会出现,点击刷新后会正常。开发环境localhost是正常的
@fengxianqi fengxianqi需要交流一下吗?
找到问题了 子应用和父应用渲染的都是#app
求分享一下解决思路
子应用和父应用不要挂载在一个dom上,应该是父子关系
试过这个方案了,无效。
尝试过的无效方案
方案一:
父应用的index.html使用<div id="root-app"></div>,子应用的index.html使用<div id="app"></div>,即上面所说的父子节关系方案,试过了无效。方案二:
父应用mounted后再调用registerMicroApps注册子应用,也无效。父应用main.jsnew Vue({ render: h => h(App), mounted: () => { console.log('subapp-viewport', document.querySelector('#subapp-viewport')) registerMicroApps([ { name: 'app', ... } ], { }); start(); }, }).$mount('#root-app');这句代码
console.log('subapp-viewport', document.querySelector('#subapp-viewport'))能正常获取到dom,说明此时已经有了dom了,但仍报Uncaught Error: application 'xxxx' died in status SKIP_BECAUSE_BROKEN: [qiankun] Target container with #subapp-viewport not existed while yunying mounting!Uncaught Error: application 'xxxx' died in status SKIP_BECAUSE_BROKEN: [qiankun] Target container with #subapp-viewport not existed while yunying mounting!这个问题是生产环境清空缓存后首次进入页面时才会出现,点击刷新后会正常。开发环境localhost是正常的
我的问题已经排查解决了。不是qiankun导致的,是因为我这边的子应用
index.html使用了一个高德地图的js导致的:<script src="https://webapi.amap.com/maps?v=1.4.15&key=&plugin=AMap.Geocoder,AMap.PlaceSearch"></script>该js首次加载时会使用document.write去复写一次整个html,导致html中不存在子应用容器的div,从而导致了这个的问题,移除该js就解决了。
Reacted by shoes, srtsgt, CunxinZhang, 404, Zhiwen Lin, 老和山老僧, ElegantL, T0205, kokier and AllenReacted by 404 and 老和山老僧Reacted by 404 and 老和山老僧console.log("render",props);
const { container } = props;instance = new Vue({
router, render: h => h(App)}).$mount(container ? container.querySelector('#app') : '#app') 渲染到父应用子区域的#app,我这么解决好用了。
Reacted by weixiaoxi and CunxinZhang高德地图升级到 2.0 即可 https://lbs.amap.com/api/jsapi-v2/summary
Reacted by shoes, srtsgt, mister.z and 单子哥Reacted by 404
Uncaught Error: application 'vueApp' died in status SKIP_BECAUSE_BROKEN: [qiankun] Target container with #vue not existed after vueApp mounted!