关于微前端:nuxt作为主应用接入qiankun的实践附代码

上半年始终在倒腾qiankun，在应用nuxtjs接入qiankun时遇到了一些坑，记录并分享进去，心愿能帮忙到大家。
代码地址：nuxtjs-qiankun-demo

Nuxtjs接入qiankun须要次要的事项：

1. qiankun只能在客户端运行，所以须要将qiankun的逻辑放到一个只在客户端执行的plugin中：

   //nuxt.config.js
     plugins: [
     '@/plugins/element-ui',
     {
    src: '@/plugins/qiankun',
    ssr: false
     }
   ],

2. 能够通过自定义路由的形式增加子利用的路由：

   //nuxt.config.js
     router: {
    extendRoutes (routes, resolve) {
      routes.push({
        path: '/vueSubApp',
        component: resolve(__dirname, 'components/pages/VueSubApp.vue'),
        children: [
          {
            path: '*',
            component: resolve(__dirname, 'components/pages/VueSubApp.vue')
          }
        ]
      })
    }
     },

3. nuxtjs中的路由组件<nuxt/>是对vue-router中<router-view/>的封装：(最大的坑点)

   //packages/vue-app/template/components/nuxt-child.js
   <% if (features.transitions) { %>
    return h('transition', {
      props: transitionProps,
      on: listeners
    }, [routerView])
    <% } else { %>
    return routerView
    <% } %>

   能够看到nuxt反对配置来给路由加载过渡成果，切默认mode为out-in，然而这个动画模式会导致子利用激活时无奈获取子利用加载的容器dom：
   Application died in status NOT_MOUNTED: Target container with #container not existed while xxx mounting!

所以这里咱们须要批改nuxt中的默认配置：

//nuxt.config.js
 transition: {
    name: 'page',
    // in-out也能够
    mode: ''
  },
  layoutTransition: {
    name: 'layout',
    // in-out也能够
    mode: ''
  },