single-spa 原理

vite 原理

详见

vite+vue 作为基座引入 vite+react 开发环境报错

问题描述

在使用 vite+vue 作为基座项目时，引入 vite+react 子项目是会出现报错： Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201

问题描述

single-spa 和 qiankun 中，基座应用使用 router 切换子应用均会出现问题

子应用中路由变更后切换子应用会出现报错的问题，初步怀疑是主应用和子应用 vue 和 vue-router 版本不同导致的

解决方法

Vue3 基座（慎用）

基座应用为 VUe3，子应用为 Vue2

// layout/src/router/index.ts
router.beforeEach((to, from, next) => {
  if (_.isEmpty(history.state.current)) {
    _.assign(history.state, { current: from.fullPath });
  }
  next();
});

• 子应用路由跳转报错
• single-spa 开发环境下引入 vite 子项目报错
• qiankun集成子项目跨域问题
• qiankun集成子项目调试工具报错
• qiankun再次进入子应用白屏
• qiankun子应用回退历史记录白屏
• qiankun嵌入react项目报错

项目地址

single-spa-template

搭建基座项目

在命令行中运行以下命令

pnpm create vue@latest

single-spa 是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。

实现方法

single-spa 提供了一种基于路由的基座化的微前端方案，它将应用分为两类：基座应用和子应用。其中，子应用对应需要聚合的应用，基座应用是另外一个单独的应用，用于聚合子应用。

在基座应用中，我们会维护一个路由注册表 - 每个路由对应一个子应用。基座应用启动以后，当我们切换路由时，如果是一个新的子应用，会动态获取子应用的 js 脚本，然后执行脚本并渲染出相应的页面；如果是一个已经访问过的子应用，那么就会从基座应用的缓存中获取已经缓存的子应用，激活子应用并渲染出对应的页面。