single-spa、乾坤、friday接入实战

原创

已于 2022-03-11 09:21:30 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2022-02-12 19:59:07 首次发布

本文详细介绍了如何使用single-spa和qiankun实现微前端架构，包括父子应用的配置、生命周期管理以及解决样式和JS隔离的问题。同时，文章还探讨了single-spa的优缺点，并展示了qiankun如何弥补这些不足。通过实例代码展示，读者可以了解到微前端应用的开发流程和关键点。

前言

最近开发的项目中有使用到微前端，微前端在我这分为两大类，iframe、single-spa系列，在这篇文章我会记录下微应用的 single-spa、乾坤的使用和一些理解，我们公司内部的friday没有开源，在这里就不记录了。

single-spa

single-spa使用

新建father、child两个vue项目

father(父应用)

1. 安装single-spa基座

npm install single-spa --save

2. 开始配置

main.js配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { registerApplication, start } from 'single-spa'

Vue.config.productionTip = false

// 远程加载子应用
function createScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = url
    script.onload = resolve
    script.onerror = reject
    const firstScript = document.getElementsByTagName('script')[0]
    firstScript.parentNode.insertBefore(script, firstScript)
  })
}


// 记载函数，返回一个 promise
function loadApp(url, globalVar) {
  // 支持远程加载子应用
  return async () => {
    // 
    await createScript(url + '/js/chunk-vendors.js')
    await createScript(url + '/js/app.js')
    // 这里的return很重要，需要从这个全局对象中拿到子应用暴露出来的生命周期函数
    return window[globalVar]
  }
}

const apps = [
  {
    // 子应用名称
    name: 'child',
    // 子应用加载函数，是一个promise
    app: loadApp('http://localhost:3000', 'child'),
    // 当路由满足条件时（返回true），激活（挂载）子应用
    activeWhen: location => location.pathname.startsWith('/child'),
    // 传递给子应用的对象
    customProps: {}
  },
  {
    name: 'son',
    app: loadApp('http://localhost:3001', 'son'),
    activeWhen: location => location.pathname.startsWith('/son'),
    customProps: {}
  }
]

// 注册子应用
for (let i = apps.length - 1; i >= 0; i--) {
  registerApplication(apps[i])
}
new Vue({
  router, 
  mounted() {
    // 启动，开启微应用生命周期
    start()
  },
  render: h => h(App)
}).$mount('#app')

路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

App.vue配置

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/child">微应用1</router-

最低0.47元/天解锁文章