微前端方案落地--qiankun

........吧啦吧啦，【官方上的引入方案介绍的很清楚了，我们这里不做过多赘述】

乾坤/qiankun官方链接奉上

【场景】

我的场景是做一个集成平台，引入其他系统的时候支持qiankun宿主和iframe宿主两种模式

【使用】 基座应用引入qiankun无非两种模式

• loadMicroApp(app, configuration?) //手动引入

• registerMicroApps(apps, lifeCycles?) //预先注册

当新打开完整独立的子应用时，可以采用loadMicroAPP的模式，而且个人建议采用这种模式

例如：点击一个系统按钮，打开一个新的tab页面，是这个完整独立的子应用，采用这种模式load子应用可以避免在主应用里做繁琐的预先注册路由的工作

----------------------------------------------------------------------------

当在基座应用里内嵌式的打开子应用时，若此时子应用不只有一个页面，不会切换多路由的时候，采用loadMicroApp的方式也可以，但是若是子应用有多路由，就不能采用这种方式了！！！

我目前采用的路由模式是 ，主子应用都为hash模式

## 主应用

mounted() {
    registerMicroApps([
      {
        name: 'reactApp',
        entry: '//localhost:8081',
        container: '#container',
        activeRule: '/host/star',
      },
      {
        name: 'vueApp',
        entry: '//localhost:8080',
        container: '#container',
        activeRule: '/ap-e',
      },
      {
        name: 'angularApp',
        entry: '//localhost:4200',
        container: '#container',
        activeRule: '/app-angular',
      },
    ]);
    // 启动 qiankun
    start();
  },
复制代码

## 子应用

const routes = [
  {
    path: '/host/star/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/host/star/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

复制代码

  <div id="app">
    <div id="nav">
      <router-link to="/host/star/home">Home</router-link> |
      <router-link to="/host/star/about">About</router-link>
    </div>
    <router-view />
  </div>
复制代码

部署发版到服务器后，主应用fetch子应用的时候会报跨域问题，nginx配置如下

      location /host/star {

            alias   /home/apc/html/qkchild;
            index  index.html index.htm;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Allow-Headers *;
            if ($request_method = 'OPTIONS') {
              return 204;
            }
        }
        location /host/static {
            alias   /home/apc/html/qkchild/static;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Allow-Headers *;
            if ($request_method = 'OPTIONS') {
              return 204;
            }
        }
复制代码