记录一下微前端MicroApp项目的搭建,用的是vue-element-admin + MicroApp

1. 安装microApp

npm install @micro-zoe/micro-app --save

2.在main.js中引入

import microApp from '@micro-zoe/micro-app' // microApp
microApp.start()

3.解决跨域(子应用)

// 子应用vue.config.js
devServer{
    // ...
    headers: {
        'Access-Control-Allow-Origin': '*'
    }
}

4.基座调用（动态渲染子应用）

这里动态渲染子应用我用的是一个页面，每次通过跳转其它页面的重定向去重新进入这个页面

// middlewares.vue

created() {
    this.$router.push({ path: '/child' })
}




<-- childApp -->

<micro-app
      :name="oneSide.app_name"
      :url="oneSide.url"
      :baseroute="'/' + oneSide.path"
      style="width: 100%;height:100%;position: relative"
      @created="created"
      @beforemount="beforemount"
      @mounted="mounted"
      @unmount="unmount"
      @error="error"
/>

5.子应用配置

const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
  routes: constantRoutes
})

6.子应用环境变量获取

// main.js
if (window.__MICRO_APP_ENVIRONMENT__) console.log('我在微前端环境中')
else console.log('我不在微前端环境中')