微前端基于ICESTARK子应用改造

安装ICESTARK子应用架构包

pnpm i @ice/stark-app

子应用main.ts文件基础配置

import { createApp } from "vue";
import type { App as Root } from "vue";
import { createWebHistory, createRouter } from "vue-router";
import isInIcestark from "@ice/stark-app/lib/isInIcestark";
import getBasename from "@ice/stark-app/lib/getBasename";
import App from "./App.vue";
import { routes } from "./router/index";

let vue: Root<Element> | null = null;

const runApp = (container: Element | string) => {
  const history = createWebHistory(isInIcestark() ? getBasename() : "/");
  const router = createRouter({
    history,
    routes,
  });
  vue = createApp(App);
  vue.use(router);
  vue.mount(container);
};

if (!isInIcestark()) {
  runApp("#app");
}

export function mount({ container }: { container: Element }) {
  runApp(container);
}

export function unmount() {
  if (vue) {
    vue.unmount();
  }
}

导出路由列表

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "home",
    component: () => import("../view/home/index.vue"),
    meta: {
      title: "home",
    },
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior() {
    // 始终滚动到顶部
    return { top: 0 };
  },
});
export { routes, router };

修改子应用入口地址

效果图