关于微前端:微前端-SingleSPA

什么是微前端？

微前端就是依据不同的性能拆分成多个独立模块（子利用）,通过主利用来加载这些子利用。微前端的外围在于拆，拆完后在合。

微前端的应用场景

1. 不同团队开发同一个利用，然而用到的技术栈不同的状况下
2. 每个团队独立开发部署，不依赖于别的团队代码
3. 老的我的项目代码和新的技术栈在同一利用中交融

有人说了这用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

<template>
  <div id="app">
    <el-container>
      <el-aside width="200px">
        <el-menu router class="el-menu-vertical-demo">
          <el-menu-item-group>
            <el-menu-item index="/app1">选项1</el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </el-aside>
      <el-main>
        <div id="app1"></div>
      </el-main>
    </el-container>
  </div>
</template>

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')
}