Micro front-end-qiankun: access nuxt2 to nuxt2

1. Background

Main application: nuxt2, webpack

Sub-applications: nuxt2, webpack

2. Code - configure the main application

2.1. Installation

yarn add qiankun

2.2、/plugins/qiankun.js

export default async ({ store }) => {
    await store.dispatch('getMenus')
}

2.3、nuxt.config.js

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'qiankun-base-main-nuxt2',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'element-ui/lib/theme-chalk/index.css'
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/element-ui',
    { src: '~/plugins/qiankun.js', ssr: false },
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios'
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: '/'
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [/^element-ui/]
  }
}

2.4、layouts/default.vue

<template>
  <div id="app-wrapper">
    <div id="content-wrapper" class="mui--text-center">
      <div>default</div>
      <div v-if="qiankunStarted" id="subapp"></div>
      <nuxt v-if="!qiankunStarted" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { registerMicroApps, start } from 'qiankun'
export default {
  data () {
    return {
      qiankunStarted: null
    }
  },
  computed: {
    ...mapState({
      apps: state => state.apps || [],
      sdk: state => state.sdk || null
    })
  },
  mounted () {
    this.init()
    this.qiankunStarted = window.qiankunStarted
  },
  methods: {
    init () {
      registerMicroApps(this.apps)
      if (!window.qiankunStarted) {
        window.qiankunStarted = true
        start()
      }
    }
  }
}
</script>

<style>
</style>

2.5、store/index.js

import { Message } from 'element-ui'
import {
  initGlobalState
} from 'qiankun'

const TYPES = {
  INIT_APPS: 'init_apps'
}

export const state = () => ({
  apps: [],
  name: 'main',
  sdk: null
})

export const mutations = {
  [TYPES.INIT_APPS] (state, apps){
    // 初始化全局变量
    const actions = initGlobalState({
      name: state.name
    })

    // 使用 sdk 方式进行 父子应用通信, 这里大家可以根据自己项目进行增加删除
    const sdk = {
      globalState: actions,
      toast: (...args) => {
        Message(...args)
      },
      router: {
        push: (...args) => {
          this.$router.push(...args)
        },
        replace: (...args) => {
          this.$router.replace(...args)
        },
        resolve: (...args) => {
          this.$router.resolve(...args)
        }
      },
      store: {
        dispatch: (...args) => {
          this.dispatch(...args)
        },
        commit: (...args) => {
          this.commit(...args)
        },
        state: { ...this.state }
      },
      name: state.name
    }

    // 处理 apps 列表
    apps = apps.map((item) => {
      return {
        ...item,
        container: '#subapp',
        props: {
          sdk
        }
      }
    })

    // 处理路由表
    const routes = []
    apps.forEach((item, i) => {
      if (Array.isArray(item.activeRule)) {
        routes.push(...item.activeRule.map(i => ({
          path: `${i.slice(1)}`,
          name: `${item.name}${i}`,
          component: () => import('@/pages/spa.vue').then(m => m.default || m)
        })))
        return false
      }
      routes.push({
        path: `${item.activeRule.slice(1)}`,
        name: `${item.name}-i`,
        component: () => import('@/pages/spa.vue').then(m => m.default || m)
      })
    })

    // 动态增加路由, 这里要注意 404 页面不能直接写在 pages 中
    // 不然匹配的时候会根据顺序匹配到 * 就直接返回了 从而匹配不到我们后续添加的动态路由
    // console.log(routes)
    this.$router.addRoutes([].concat(...routes,
      {
        path: '404',
        name: 404,
        component: () => import('~/layouts/error.vue').then(m => m.default || m)
      }
    ))

    state.apps = apps
    state.sdk = sdk
  }
}

export const actions = {
  async getMenus ({ commit }) {
    const { payload } = await getMenus()
    commit(TYPES.INIT_APPS, payload)
  }
}

function getMenus () {
  return {
    code: 200,
    payload: [
      {
        name: 'subapp',
        container: '#subapp',
        activeRule: '/about',
        entry: '//localhost:3005', // 解决不同服务器和域名
        props: {
          msg: '我是主应用main' // 主应用向微应用传递参数
        }
      }
    ],
    message: 'success'
  }
}

3. Access sub-applications

Micro front end-qiankun: vue3-vite access nuxt2_snow@li's blog-CSDN blog

4. Access the main application of qiankun, the access is successful

5. Welcome to exchange and correct, follow me, and learn together.

Reference link:

qiankun from access to deployment (nuxt articles) Develop Paper