qiankun接入vite项目

1,329 阅读1分钟

主应用为react(webpack)项目,子应用为vue3(vite)搭建

接入过程中有一些小坑记录下

思路

vit-plugin-qiankun插件,具体用法

重复刷新

dev环境,进入vite子项目,无限刷新

解决方法:设置hmr

    server: {
      port: 80,
      host: "dd-data-local.com",
      // strictPort: true,
      hmr: {
        host: "dd-data-local.com",
        port: 80
      }
    },

路由问题

注意和react项目引入方式的差异

两点注意:

  • 不用设置 base
  • 子路由表改造,根路由用主应用中设置的activeRule

完整示例:

main/render

function render(props) {
  const { container } = props;
  instance = createApp(App);
  let router = null;

  const history = createWebHashHistory();

  router = createRouter({
    history,
    routes: routeList
  });

  instance
    .use(Antd)
    .use(router)
    .use(store)
    .use(VueBlocksTree, defaultoptions)
    .mount(
      container
        ? container.querySelector("#root")
        : document.getElementById("root")
    );
}

routerList

const routeList = [
  {
    path: "/dataCenter",
    name: "Home",
    component: () => Home,
    redirect: "/dataCenter/list",
    children: [
      {
        name: "list",
        path: "list",
        component: () => import("../pages/MetaDataManager/index.vue")
      },
      {
        name: "detail",
        path: "detail",
        component: () => import("../pages/MetaDataManager/Detail.vue")
      }
    ]
  }
];