nuxt作為主應用接入qiankun的實踐（附程式碼）

不死小強發表於2022-11-30
UX

上半年一直在倒騰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: ''
  },

相關文章