vent-forewarn-micro/src/main.ts

import 'uno.css';
import '@/design/index.less';
import '@/components/VxeTable/src/css/index.scss';
import 'ant-design-vue/dist/reset.css';
// Register icon sprite
import 'virtual:svg-icons-register';

import { createApp } from 'vue';

import { registerGlobComp } from '@/components/registerGlobComp';
import { setupGlobDirectives } from '@/directives';
import { setupI18n } from '@/locales/setupI18n';
import { setupErrorHandle } from '@/logics/error-handle';
import { initAppConfigStore } from '@/logics/initAppConfig';
import { router, setupRouter } from '@/router';
import { setupRouterGuard } from '@/router/guard';
import { setupStore } from '@/store';
import { renderWithQiankun, QiankunProps, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
import { MicroAppStateActions } from 'qiankun';
import { useUserStore } from '@/store/modules/user';

import App from './App.vue';

type AppProps = Partial<MicroAppStateActions & QiankunProps>;
let app: any = null;

async function bootstrap(props?: AppProps) {
  app = createApp(App);

  // Configure store
  // 配置 store
  setupStore(app);

  // Initialize internal system configuration
  // 初始化内部系统配置
  initAppConfigStore();

  // Register global components
  // 注册全局组件
  registerGlobComp(app);

  // Multilingual configuration
  // 多语言配置
  // Asynchronous case: language files may be obtained from the server side
  // 异步案例：语言文件可能从服务器端获取
  await setupI18n(app);

  // Configure routing
  // 配置路由
  setupRouter(app);

  // router-guard
  // 路由守卫
  setupRouterGuard(router);

  // Register global directive
  // 注册全局指令
  setupGlobDirectives(app);

  // Configure global error handling
  // 配置全局错误处理
  setupErrorHandle(app);

  // https://next.router.vuejs.org/api/#isready
  // await router.isReady();
  if (props) {
    const userStore = useUserStore();
    const { container, data } = props;
    if (container && props.onGlobalStateChange) {
      props.onGlobalStateChange((state, prev) => {
        //state: 变跟后的状态， prev：变跟前的状态
        console.log(state, prev);
        for (const key in state) {
          if (key === 'token') {
            const token = state.token;
            userStore.setToken(token);
          }
          if (key === 'store') {
            const store = state.store;
            const { userInfo, roleList } = store;
            userStore.setUserInfo(userInfo);
            userStore.setRoleList(roleList);
          }
        }
      });
    }
    if (data) {
      if (data.router) {
        const parentRouter = data.router;
        if (parentRouter) {
          app.provide('parentRouter', parentRouter);
        }
      }
      if (data.token) {
        userStore.setToken(data.token);
      }
    }
    app.mount(container ? <Element>container.querySelector('#app') : '#app');
  } else {
    app.mount('#app');
  }
}
if (qiankunWindow.__POWERED_BY_QIANKUN__) {
  renderWithQiankun({
    /**
     * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
     * @param props
     */
    mount(props: QiankunProps) {
      bootstrap(props);
    },
    /**
     * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子
     */
    bootstrap() {
      // 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
    },
    /**
     * 应用每次切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
     */
    unmount(props: QiankunProps) {
      app.unmount();
      app._container.innerHTML = '';
      app = null;
    },
    update(props: QiankunProps) {},
  });
} else {
  bootstrap();
}