micro-app微应用子项目有二级目录,部署后页面空白

本地:

img

部署后:

img

尝试项目独立查看:

img

平台是基座应用,大屏是子应用。在本地调试好好的,但是部署后就打不开

出现页面空白的问题可能是因为微应用在部署时没有正确处理子应用的路由。如果您的子应用有二级目录,例如/dashboard/subpage,则需要在微应用的路由配置中正确处理这些子目录。

首先,请确保您的微应用已经正确配置了子应用的路由。在微应用的主模块中,您需要为子应用的路径(例如/dashboard)配置对应的子应用实例,例如:

// main.js
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'dashboard',
    entry: 'http://localhost:3000',
    container: '#subapp-container',
    activeRule: '/dashboard', // 这里设置子应用的激活规则
  },
]);

start();

上面的代码中,我们将子应用的激活规则设置为/dashboard,表示当微应用的URL路径匹配到/dashboard时,将会渲染子应用。

在配置好微应用的路由后,您还需要在子应用的路由配置中处理二级目录。在子应用的路由配置中,您需要为每个子目录的路径添加前缀,例如:

// router.js
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory('/dashboard'), // 这里设置子应用的基础路径
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/subpage', // 这里设置子目录的路径
      component: Subpage,
    },
  ],
});

export default router;

上面的代码中,我们使用了Vue Router作为子应用的路由库,并在创建路由时将基础路径设置为/dashboard。然后,我们为子目录的路径添加前缀,例如/subpage变为/dashboard/subpage,以确保路由匹配正确。

如果您的子应用使用了其他的路由库或框架,请根据具体情况进行相应的路由配置。

如果对您有帮助,请给与采纳,谢谢。

空白页面可能是由于资源路径引用不正确导致的。您可以检查以下几点:

1.确认资源路径是否正确:在子应用的 HTML 文件中,您需要使用相对路径来引用本地资源,如下:


<script type="text/javascript" src="./js/main.js"></script>
<link rel="stylesheet" href="./css/main.css">

如果资源路径不正确,会导致无法加载子应用的 js 和 css 文件,从而导致空白页面。

2.确认子应用是否能够正确加载:您可以在控制台中查看网络请求,确认子应用的 js 和 css 是否被正确加载。如果没有被加载,您需要检查子应用的部署路径是否正确,以及基座应用是否能够正确访问子应用的资源。

3.确认基座应用的配置是否正确:如果子应用的部署路径或资源路径发生了变化,您需要在基座应用中更新子应用的配置。例如,您可以在基座应用的配置文件中,使用以下配置来指定子应用的部署路径:


{
  "name": "my-micro-app",
  "entry": "//localhost:7100",
  "base": "/my-micro-app/",
  "mountElementId": "root",
  "props": {}
}

这里,base 属性指定了子应用的部署路径,entry 属性指定了子应用的入口 URL。如果子应用有二级目录,您需要在 base 属性中指定完整的路径。