加载不出子运用页面。麻烦大佬帮忙看下

[Kimmyzhao]

子应用访问能正常访问，如图所示

主应用访问http://localhost:4000/apps/upms-front/#/login时，控制台输出一下内容

控制台输出的内容中已经有子应用的内容，但却没有将子应用内容添加到subAppContainer这个里面，如图

路由代码如下

import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import type { App } from 'vue'
import { Layout } from '@/utils/routerHelper'
import { useI18n } from '@/hooks/web/useI18n'
import SubAppContainer from '@/views/SubAppContainer/SubAppContainer.vue'

const { t } = useI18n()

export const constantRouterMap: AppRouteRecordRaw[] = [
  {
    path: '/',
    component: Layout,
    redirect: '/home/index',
    name: 'Root',
    meta: {
      hidden: true
    }
  },
  {
    path: '/redirect',
    component: Layout,
    name: 'Redirect',
    children: [
      {
        path: '/redirect/:path(.*)',
        name: 'Redirect',
        component: () => import('@/views/Redirect/Redirect.vue'),
        meta: {}
      }
    ],
    meta: {
      hidden: true,
      noTagsView: true
    }
  },
  {
    path: '/login',
    component: () => import('@/views/Login/Login.vue'),
    name: 'Login',
    meta: {
      hidden: true,
      title: t('router.login'),
      noTagsView: true
    }
  },
  {
    path: '/home',
    component: Layout,
    name: 'Home',
    redirect: '/home/index',
    meta: {
      title: t('router.Home'),
      icon: 'carbon:skill-level-advanced'
    },
    children: [
      {
        path: 'index',
        name: 'HomeIndex',
        component: () => import('@/views/Home/Index.vue'),
        meta: {
          title: t('router.Home')
        }
      }
    ]
  },
  {
    path: '/apps',
    name: 'SubAppContainer',
    component: Layout,
    redirect: '',
    meta: {
      title: t('router.SubApp'),
      icon: 'carbon:skill-level-advanced',
      hidden: true
    },
    children: [
      {
        path: ':catchAll(.*)',
        component: SubAppContainer,
        name: 'SubAppContainer',
        meta: {
          title: t('router.SubApp')
        }
      }
    ]
  },
  {
    path: '/:catchAll(.*)',
    component: () => import('@/views/Error/404.vue'),
    name: 'NoFind',
    meta: {
      hidden: true,
      title: '404',
      noTagsView: true
    }
  }
]

export const asyncRouterMap: AppRouteRecordRaw[] = []

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  strict: true,
  routes: constantRouterMap as RouteRecordRaw[],
  scrollBehavior: () => ({ left: 0, top: 0 })
})

export const resetRouter = (): void => {
  const resetWhiteNameList = ['Redirect', 'Login', 'NoFind', 'Root']
  router.getRoutes().forEach((route) => {
    const { name } = route
    if (name && !resetWhiteNameList.includes(name as string)) {
      router.hasRoute(name) && router.removeRoute(name)
    }
  })
}

export const setupRouter = (app: App<Element>) => {
  app.use(router)
}

export default router

micro-apps.ts代码如下

import router from './router'

const microApps = [
  {
    name: 'upms-front',
    // entry: '/upms-front/',
    entry: '//127.0.0.1:8080',
    activeRule: '/apps/upms-front/'
  }
]

const apps = microApps.map((item) => {
  return {
    ...item,
    container: '#subAppContainer', // TODO 子应用挂载的div, container的id名称, 必须和指定的放置子应用的容器id相同
    props: {
      // routerBase: item.activeRule, // 下发基础路由
      data: { router },
      getGlobalState: {} // 下发getGlobalState方法
    }
  }
})

export default apps

<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { ElRow, ElCol, ElCard, ElImage } from 'element-plus'
import { start } from 'qiankun'
import { onMounted } from 'vue'
declare const window: any
import { registerMicroApps, addGlobalUncaughtErrorHandler } from 'qiankun'
import microApps from '@/micro-apps'

defineOptions({
  name: 'HomeIndex'
})

const { t } = useI18n()

const apps = microApps.map((item) => {
  return {
    ...item
  }
})
registerMicroApps(apps, {
  beforeLoad: (app) => {
    console.log('before load app.name====>>>>>', app.name, app)
  },
  beforeMount: [
    (app) => {
      console.log('[main-LifeCycle] before mount %c%s', 'color: green;', app.name)
    }
  ],
  afterMount: [
    (app) => {
      console.log('[main-LifeCycle] after mount %c%s', 'color: green;', app.name)
      // this.$store.commit('setSubAppName', app.name);
    }
  ],
  afterUnmount: [
    (app) => {
      console.log('[main-LifeCycle] after unmount %c%s', 'color: green;', app.name)
      // this.$store.commit('setSubAppName', '');
    }
  ]
})

// 添加全局异常捕获
addGlobalUncaughtErrorHandler((handler) => {
  console.log('异常捕获', handler)
})

onMounted(() => {
  if (!window.qiankunStarted) {
    window.qiankunStarted = true
    start({
      prefetch: 'all', // 预加载
      sandbox: {
        experimentalStyleIsolation: true //   开启沙箱模式,实验性方案
      }
    })
  }
})
</script>

<template>
  <ContentWrap :title="t('router.Home')">
    <el-row>
      <el-col v-for="(o, index) in microApps" :key="index" :span="8" :offset="index > 0 ? 2 : 0">
        <el-card :body-style="{ padding: '0px' }">
          <router-link :to="o.activeRule">
            <el-image
              style="width: 200px; height: 200px"
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              fit="fill"
            />
            <div style="padding: 14px">
              <span>{{ o.name }}</span>
            </div>
          </router-link>
        </el-card>
      </el-col>
    </el-row>
  </ContentWrap>
</template>

<style scoped lang="less">
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>

版本信息如下

"qiankun": "^2.10.16",
"vue": "3.3.8",
"vue-i18n": "9.7.0",
"vue-router": "^4.2.5",
"vue-types": "^5.1.1"

[jk4235]

要自己写一下render方法

参考这里 examples/vue/src/main.js