微前端方案落地--qiankun

·  阅读 842
微前端方案落地--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;
            }
        }
复制代码
分类:
前端
标签:
分类:
前端
标签: