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

47次阅读

共计 1032 个字符，预计需要花费 3 分钟才能阅读完成。

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

qiankun 只能在客户端运行，所以须要将 qiankun 的逻辑放到一个只在客户端执行的 plugin 中：
```
//nuxt.config.js
  plugins: [
  '@/plugins/element-ui',
  {
 src: '@/plugins/qiankun',
 ssr: false
  }
],
```

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

//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')
       }
     ]
   })
 }
  },

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: ''
  },

正文完