Skip to content

请问微应用挂载不上是什么原因呢 #838

Description

@yitiaoxianyu0927

Uncaught Error: application 'vueApp' died in status SKIP_BECAUSE_BROKEN: [qiankun] Target container with #vue not existed after vueApp mounted!

Activity

  1. dengBox commented on Aug 10, 2020

    @dengBox

    错误信息说的是,没有容器节点,检查一下你的版本,看看对应的文档排查一下

  2. dinglittle commented on Aug 10, 2020

    @dinglittle

    同款问题, 时好时坏

  3. tangs8dj commented on Aug 11, 2020

    @tangs8dj

    意思是vueApp微应用加载的时候, 没有找到挂载节点#vue

  4. yitiaoxianyu0927 commented on Aug 11, 2020

    @yitiaoxianyu0927
    Author

    找到问题了 子应用和父应用渲染的都是#app

  5. fengxianqi commented on Aug 11, 2020

    @fengxianqi

    找到问题了 子应用和父应用渲染的都是#app

    求分享一下解决思路

  6. dengBox commented on Aug 11, 2020

    @dengBox

    找到问题了 子应用和父应用渲染的都是#app

    求分享一下解决思路

    子应用和父应用不要挂载在一个dom上,应该是父子关系

  7. fengxianqi commented on Aug 11, 2020

    @fengxianqi

    找到问题了 子应用和父应用渲染的都是#app

    求分享一下解决思路

    子应用和父应用不要挂载在一个dom上,应该是父子关系

    试过这个方案了,无效。

    尝试过的无效方案

    方案一:
    父应用的index.html使用<div id="root-app"></div>,子应用的index.html使用<div id="app"></div>,即上面所说的父子节关系方案,试过了无效。

    方案二:
    父应用mounted后再调用registerMicroApps注册子应用,也无效。父应用main.js

    new 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是正常的

  8. tangs8dj commented on Aug 11, 2020

    @tangs8dj

    @fengxianqi fengxianqi需要交流一下吗?

  9. fengxianqi commented on Aug 11, 2020

    @fengxianqi

    找到问题了 子应用和父应用渲染的都是#app

    求分享一下解决思路

    子应用和父应用不要挂载在一个dom上,应该是父子关系

    试过这个方案了,无效。

    尝试过的无效方案

    方案一:
    父应用的index.html使用<div id="root-app"></div>,子应用的index.html使用<div id="app"></div>,即上面所说的父子节关系方案,试过了无效。

    方案二:
    父应用mounted后再调用registerMicroApps注册子应用,也无效。父应用main.js

    new 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就解决了。

  10. yitiaoxianyu0927 commented on Aug 12, 2020

    @yitiaoxianyu0927
    Author

    console.log("render",props);
    const { container } = props;

    instance = new Vue({

    router,
    render: h => h(App)
    

    }).$mount(container ? container.querySelector('#app') : '#app') 渲染到父应用子区域的#app,我这么解决好用了。

  11. kuitos commented on Aug 26, 2020

    @kuitos
    Member

    高德地图升级到 2.0 即可 https://lbs.amap.com/api/jsapi-v2/summary

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions