官网地址：https://zh-hans.single-spa.js.org/docs/getting-started-overview
优点：路由劫持，应用加载
缺点：singleSpa 不够灵活，不能动态加载js文件；样式不隔离，没有js沙箱的机制

1、新建项目

// 生成子应用
vue create child-vue
生成父应用
vue create parent-vue

2、子应用

子应用main.js文件

• 微应用路由改造，添加一个特定的前缀
• 微应用入口改造，挂载点变更和生命周期函数导出
• 打包工具配置更改

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import singleSpaVue  from 'single-spa-vue'

Vue.config.productionTip = false

// 我们需要父应用加载子应用
// bootstrap mount unmount
// single-spa-vue 
const appOptions = {
  el: '#childRoot',
  router,
  render: h => h(App)
}
const vueLifeCycle = singleSpaVue({
  Vue,
  appOptions
});

//如果是父应用引用我
if(window.singleSpaNavigate){
  __webpack_public_path__ = 'http://localhost:10000/';
}
// 为了独立可以独立运行
if(!window.singleSpaNavigate){
  delete appOptions.el;
  new Vue(appOptions).$mount('#app')
}

// 协议接入，我们定义好了，父应用会调用这些方法
export const bootstrap = vueLifeCycle.bootstrap;
export const mount = vueLifeCycle.mount;
export const unmount = vueLifeCycle.unmount;

// 我们需要父应用加载子应用，将子应用打包成一个个的lib去给父应用使用

vue.config.js

module.exports = {
    configureWebpack: {
        output: {
            library: 'singleVue',
            libraryTarget: 'umd',
        },
        devServer: {
            port: 10000
        }
    }
}
//相当于导出 window.singleVue.bootstrap

3、主应用

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

async function loadScript(url){
  return new Promise((resolve, reject)=> {
    let script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

registerApplication(
  'myVueApp', 
  async ()=> {
    console.log('加载模块');
    // systemJS
    await loadScript('http://localhost:10000/js/chunk-vendors.js');
    await loadScript('http://localhost:10000/js/app.js');
    return window.singleVue;
  },
  // 用户切换到/child-vue 的路径下，我需要加载刚才定义子应用
  location => location.pathname.startsWith('/child-vue'),
  {
    a: 'aaaaaa'
  }
);

start();

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <router-link to="/child-vue">加载子应用</router-link>
    <!--子应用放的位置-->
    <div id="childRoot"></div>
  </div>
</template>

<style>
</style>

image.png