一、背景

主应用：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-modessr: false,// Global page headers: https://go.nuxtjs.dev/config-headhead: {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-csscss: ['element-ui/lib/theme-chalk/index.css'],// Plugins to run before rendering page: https://go.nuxtjs.dev/config-pluginsplugins: ['@/plugins/element-ui',{ src: '~/plugins/qiankun.js', ssr: false },],// Auto import components: https://go.nuxtjs.dev/config-componentscomponents: true,// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modulesbuildModules: [// https://go.nuxtjs.dev/eslint'@nuxtjs/eslint-module'],// Modules: https://go.nuxtjs.dev/config-modulesmodules: [// https://go.nuxtjs.dev/axios'@nuxtjs/axios'],// Axios module configuration: https://go.nuxtjs.dev/config-axiosaxios: {// Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308baseURL: '/'},// Build Configuration: https://go.nuxtjs.dev/config-buildbuild: {transpile: [/^element-ui/]}
}

2.4、layouts/default.vue

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 = appsstate.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主应用，访问成功

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

参考链接：

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