微前端 Single-SPA

什么是微前端？

微前端就是根据不同的功能拆分成多个独立模块（子应用）,通过主应用来加载这些子应用。微前端的核心在于拆，拆完后在合。

微前端的使用场景

不同团队开发同一个应用，但是用到的技术栈不同的情况下

每个团队独立开发部署，不依赖于别的团队代码

老的项目代码和新的技术栈在同一应用中融合

有人说了这用iframe一样能解决啊，注意，和微前端相比，iframe有多个弊端。比如

1.左侧是一个菜单，右侧内容是加载不同的iframe，每当点击一个菜单就会加载整个模块的js,这严重影响了性能。
2.当用户在某一个页面刷新浏览器时用户当前点开的会丢失

SingleSpa实战

1.创建子应用

这里我创建一个vue子应用（react没学过，以后有机会再整合）

vue create app1

2.下载single-spa-vue包

npm install single-spa-vue

3.创建主应用

vue create main-app
npm i single-spa

4.主应用中的main

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// 动态添加script脚本
const loadScript = async (url)=> {
  await new Promise((resolve,reject)=>{
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script)
  });
}
import { registerApplication, start } from 'single-spa';
// 注册子应用
registerApplication(
    'app1', 
    async ()=>{
      // 子应用对应的接口
        await loadScript('http://localhost:10000/js/chunk-vendors.js');
        await loadScript('http://localhost:10000/js/app.js');
        return window.app1
    },
    // 当匹配url路径为/app1时
    location => location.pathname.startsWith('/app1')
)
// 启动应用
start();
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

5.主应用的App.vue

6.子应用 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

const appOptions = {
  el: '#app1',//要挂载到主应用的哪个元素上
  router,
  render: h => h(App)
}
// 返回一个生命周期对象
const vueLifeCycle = singleSpaVue({
  Vue,
  appOptions
});

// 子应用必须导出 以下生命周期 bootstrap、mount、unmount
export const bootstrap = vueLifeCycle.bootstrap;
export const mount = vueLifeCycle.mount;
export const unmount = vueLifeCycle.unmount;
export default vueLifeCycle;

7.打包成供主应用使用的类库（子应用中的配置）

在src中添加vue.config.js

module.exports = {
    configureWebpack: {
        output: {
            library: 'app1',
            libraryTarget: 'umd'//挂载到Windows上
        },
        devServer: {
            port: 10000
        }
    }
}

8.设置子路由的配置

经过上面七个步骤的配置可以显示出下面这样的页面，但是当点击Home这个路由时，他是默认跟着主应用跳转的，这里需要我们配置一下子应用的路由路径是相对于子路由的

子路由 router.js
const router = new VueRouter({
  mode: 'history',
  base: '/app1',//主应用默认跳转/app1加载子路由 由此以/app1作为相对路径
  routes
})

9.设置子应用的 __webpack_public_path__

点击About加载about.js时请求的依然是主应用路径下的about.js，但是主应用中不存在，所以才会报下面的错，我们需要给子应用指定一个__webpack_public_path__，在进行点击的时候默认将__webpack_public_path__指向子应用，直接在子应用下寻找该文件

在子应用中添加

if(window.singleSpaNavigate){
    __webpack_public_path__ = 'http://localhost:10000/'
  }

10.子应用单个工程启动

这里需要判断一下是否为主应用所应用如果没有那么需要挂载到子应用的id上

if (!window.singleSpaNavigate){
  delete appOptions.el;
  new Vue(appOptions).$mount('#app')
}