微前端-qiankun：nuxt2 接入 nuxt2

悠悠 2024-03-25 21:45 68阅读 0赞

**一、背景**

**主应用：nuxt2、webpack**

**子应用：nuxt2、webpack**

**二、代码-配置主应用**

**2.1、安装**

> **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'
      }
    }

**三、接入子应用**

[微前端-qiankun：vue3-vite 接入 nuxt2\_snow@li的博客-CSDN博客][-qiankun_vue3-vite _ nuxt2_snow_li_-CSDN]

**四、访问qiankun主应用，访问成功**

![6fdb85d81b8846c5bd5151eec278ee46.png][]

**五、欢迎交流指正，关注我，一起学习。**

**参考链接：**

[qiankun从接入到部署（nuxt篇） - 掘金][qiankun_nuxt_ -]

[-qiankun_vue3-vite _ nuxt2_snow_li_-CSDN]: https://blog.csdn.net/snowball_li/article/details/129601888
[6fdb85d81b8846c5bd5151eec278ee46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/8c9d152b2b8a438f8cf147845c78e9c4.png
[qiankun_nuxt_ -]: https://juejin.cn/post/7137235680207306760