使用微前端mirco-app的经验

注意:项目使用的是vue2+element-ui

前言

   目前，行业内被使用的几个微前端为single-spa，qiankun，mirco-app,以及wujie。经过多方面对比，最终选择了mirco-app。在此，分享下使用这个微前端的经验。

一、mirco-app是什么？

mirco-app借鉴了WebComponent的思想，通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染，是目前市面上接入微前端成本最低的方案，也是较为容易上手的微前端框架

二、使用步骤

1.安装依赖及引入库

npm i @micro-zoe/micro-app@beta --save

import microApp from '@micro-zoe/micro-app'

microApp.start()

2.嵌入子应用

<!-- name：应用名称, url：应用地址 --> 
<micro-app name='my-app' url='http://localhost:80/'></micro-app>

3.子应用配置

在vue.config.js设置跨域支持

devServer: {
   headers: {
      "Access-Control-Allow-Origin": "*",
    },
}

在src文件夹中新增public-path.js

//public-path.js
// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
if (window.__MICRO_APP_ENVIRONMENT__) {
    // eslint-disable-next-line
    __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
  }

 在main.js引入public-path.js

import "./public-path"

在route设置基础路由

const router = new VueRouter({
  // 👇 设置基础路由，子应用可以通过window.__MICRO_APP_BASE_ROUTE__获取基座下发的baseroute，如果没有设置baseroute属性，则此值默认为空字符串
  base: window.__MICRO_APP_BASE_ROUTE__ || '/',
  routes,
})

（注意:在子应用中可通过window.__MICRO_APP_ENVIRONMENT__来判断是否在微前端环境） 

4.基座子页面的配置 

在基座views文件夹中新增base.vue

<template>
    <div>
        <micro-app name='clous' :url="url" :data='dataForChild' @created='created' @beforemount='beforemount'
            @mounted='mounted' @afterhidden='afterhidden' @beforeshow='beforeshow' @aftershow='aftershow' @error='error'
            @unmount='unmount' clear-data @datachange='handleDataChange'></micro-app>
        
    </div>
</template>

<script>
import config from './config'
import microApp from '@micro-zoe/micro-app'
export default {
    components: {
        
    },
    props: {},
    data() {
        return {
            dataForChild: {
                Authorization: localStorage.getItem("Authorization"),
               

            },
            url: `${config.clous}/`,
            helpdialog:false,
            guideUrl:""
        }
    },
    watch: {},
    computed: {},
    methods: {
        
        handleDataChange(e) {
           
        },
        created() {
            console.log('micro-app元素被创建')
        },
        beforemount() {
            console.log('即将被渲染，只在初始化时执行一次')
        },
        mounted() {
            console.log('已经渲染完成，只在初始化时执行一次')
        },
        afterhidden() {
            console.log('已卸载')
        },
        beforeshow() {
            console.log('即将重新渲染，初始化时不执行')
        },
        aftershow() {
            console.log('已经重新渲染，初始化时不执行')
        },
        error() {
            console.log('渲染出错')
        },
        unmount() {
            console.log('已卸载')
        },

    },
    created() { },
    mounted() {

    }
}
</script>
<style  scoped></style>

在views文件夹在新增config.js

//clous是base.vue里面的name
//window.location.origin + '/base'是子系统的地址
//window.location.origin是域名，
const config = {
  clous:window.location.origin + '/base',
}

export default config

5.路由

在基座配置路由

<router-view name="page"></router-view>

import baseView from '../views/base.vue'
{
    path: '/',
    name: 'index',
    component: () => import(/* webpackChunkName: "about" */ '../views/index.vue'),
    children: [
      {
        path: '/index/clous/*',
        name: 'my-app',
        components: {
          page: baseView
        }
      },
     ]
}

总结

     由于公司系统较多，集成起来比较麻烦，所以选择了较为简便的mirco-app微前端框架。目前mirco-app升级到1.0，社区也算活跃。