前端微服务-qiankun

官方引用-qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

乾坤框架分为主应用和子应用

主应用【以vue为例】直接脚手架搭建项目，需要安装quankun框架，

主应用入口文件出【main.js】添加微服务

主应用页面写法

 主应用路由写法

 避坑：

1、承载子应用的容器，标签ID名称一定要和配置的容器名称一致，

2、承载子应用的容器，要配置路由，将容器标签写在当前路由页面里面，不要写在全局【和router-view写在一起】，可能回因为在不到路由，导致容器没有加载

子应用中无需安装quankun框架，但是需要引入生命周期

子应用入口文件出【main.js】添加微服务

 子应用配置文件

 

例外介绍一下其他知识点：

1、关于 window.__POWERED_BY_QIANKUN__这是判断当前环境是否在qiankun中运行，它的生成时机是在主应用start中进行沙箱加载时候挂在到window上的

2、关于子应用挂在写法
instance = createApp(App)
instance.mount(container ? container.querySelector('#app') : '#app')
为了沙箱隔离，防止#app冲突必须判断

3、关于主应用中的registerMicroApps配置参数
registerMicroApps([
  {
    // ========== 基础配置 ==========
    name: 'vueApp',                  // 【必填】应用唯一标识
    entry: '//localhost:7101',       // 【必填】应用入口地址
    container: '#subapp-viewport',   // 【必填】容器选择器
    activeRule: '/vue',              // 【必填】激活路径规则

    // ========== 进阶配置 ==========
    props: {                         // 主应用传递给子应用的初始数据
      authToken: 'xxxxxx',
      apiEndpoint: 'https://api.example.com'
    },
    
    loader: (loading) => {           // 自定义加载状态处理
      console.log('加载状态:', loading)
    },
    
    sandbox: {                       // 沙箱配置
      strictStyleIsolation: true,    // 严格样式隔离
      experimentalStyleIsolation: true
    },
    
    // ========== 高级配置 ==========
    fetch: customFetch,              // 自定义 fetch 方法
    getPublicPath: (entry) => {      // 动态获取 publicPath
      return `${entry}/custom-path/`
    },
    
    getTemplate: (tpl) => {          // 自定义 HTML 模板处理
      return tpl.replace('<!--注释-->', '')
    },
    
    excludeAssetFilter: (url) => {   // 资源过滤规则
      return url.includes('ignore.this.asset.js')
    }
  }
]);