一、背景
主应用: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主应用,访问成功
五、欢迎交流指正,关注我,一起学习。
参考链接: