微前端框架SingleSpa Vue实践

一、主应用

1、npm i single-spa 安装single-spa；
2、main.js同级目录增加single-spa的配置文件single-spa-config.js：

// single-spa-config.js
import * as singleSpa from 'single-spa'; //导入single-spa
/*
* runScript：一个promise同步方法。可以代替创建一个script标签，然后加载服务
* */
const runScript = async (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);
    });
};

//注册微前端1
singleSpa.registerApplication(
    'app1',
    async () => {
    	// 加载子应用产物 app.js（文件名称在子应用打包配置中会提到）
    	// ip:port 为子应用dev的ip和port
        await runScript('http://127.0.0.1:3001/app.js');
        return window.singleVue;
    },
    location => location.pathname.startsWith('/app1') // 配置微前端模块路由
);

//注册微前端2
singleSpa.registerApplication(
    'app2',
    async () => {
    	// 加载子应用产物 app.js
        await runScript('http://127.0.0.1:3002/app.js');
        return window.singleVue;
    },
    location => location.pathname.startsWith('/app2') // 配置微前端模块路由
);
singleSpa.start(); // 启动

3、main.js中引入single-spa-config.js：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

// 引入single-spa配置文件
import './single-spa-config';

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

二、子应用

1、npm i single-spa-vue 安装vue子应用对应的single-spa包
2、webpack打包配置：

  output: {
    filename: 'app.js', // 对应主应用中runScript加载的js名称
    path: config.build.assetsRoot,
    library: "singleVue",
    libraryTarget: "umd"

    // path: config.build.assetsRoot,
    // filename: '[name].js',
    // publicPath: process.env.NODE_ENV === 'production'
    //   ? config.build.assetsPublicPath
    //   : config.dev.assetsPublicPath
  },

3、修改main.js入口文件：

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

const appOptions = {
	el: '#cbm-module-container',  // 挂载在主应用的dom节点， 默认为body
	router,
	render: (h) => h(App),
}
if (!window.singleSpaNavigate) { // 如果不是single-spa模式则挂载在自身的app节点上
	delete appOptions.el;
	new Vue(appOptions).$mount('#app');
}
// 使用 singleSpaVue 包装 Vue,
// 包装后返回的对象中vue包装好的三个生命周期,bootstrap,mount,unmount,
// 协议接入,我们定好了协议,父应用会调用这些方法
export const { bootstrap, mount, unmount } = singleSpaVue({ Vue, appOptions });

/* eslint-disable no-new */
// new Vue({
//   el: '#app',
//   router,
//   components: { App },
//   template: '<App/>'
// })

三、启动主应用和所有子应用，访问主应用地址，输入single-spa-config.js中配置的子应用路由，访问子应用。