门户网站建设服务报价素材网免费下载

一般场景是对已有应用进行改造，比如接入两个新的工程，但是工程不适合整体嵌入现有应用，那就以当前应用为基座，增加微应用路由，通过router-view，将子应用接入，
且这种方式可以共用登录信息。

主应用准备和改造如下几个文件：

src/config.js
src/utils/qiankun
src/router/routes
src/components/sub.vue

// src/config.js
export default {subApps: [{name: 'sub-vue2', // 子应用名称，跟package.json一致entry: '//localhost:8003', // 子应用入口，本地环境下指定端口container: '#sub-region', // 挂载子应用的domactiveRule: '/app/sub-vue2', // 路由匹配规则props: {} // 主应用与子应用通信传值},],/* qiankun全局声明周期钩子 */microConfig = {beforeLoad: [(app) => {console.log("%c before load", "background:#3a5ab0 ; padding: 1px; border-radius: 3px;  color: #fff", app);},], // 预加载beforeMount: [(app) => {console.log("%c before mount", "background:#7d9553 ; padding: 1px; border-radius: 3px;  color: #fff", app);},], // 挂载前回调afterMount: [(app) => {console.log("%c after mount", "background:#7d7453 ; padding: 1px; border-radius: 3px;  color: #fff", app);},], // 挂载后回调beforeUnmount: [(app) => {console.log("%c before unmount", "background:#7dd253 ; padding: 1px; border-radius: 3px;  color: #fff", app);},], // 卸载前回调afterUnmount: [(app) => {console.log("%c after unmount", "background:#d2525c ; padding: 1px; border-radius: 3px;  color: #fff", app);},], // 卸载后回调};
}

// src/utils/qiankun
import { registerMicroApps } from 'qiankun'
import config from '@/config'const { subApps, microConfig } = configexport function registerApps() {try {registerMicroApps(subApps, microConfig)} catch (err) {console.log(err)}
}

// src/router/routes
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/Login'
import Home from '@/views/Home'
import Layout from '@/views/Layout'
Vue.use(VueRouter)
const routes = [{path: '/',redirect: { name: 'home' },meta: { title: '首页' },children: [{path: '/login',name: 'login',component: Login,meta: { isTabs: false, isSide: false, moduleName: 'main', title: '登录' }},{path: '/',name: 'Layout',component: Layout,redirect: process.env.VUE_APP_DEFAULT_APP, // 默认加载的路由children: [{path: '/home',name: 'Home',component: Home,meta: { isTabs: false, isSide: false, moduleName: 'main', title: '首页' }}]},{path: '/app/sub-vue2/',name: 'sub-vue2',meta: {},component: () => import('@/components/sub.vue')}]}
]export default routes

// src/components/sub.vue
<template><div id="sub-region"></div>
</template><script>
import { start } from 'qiankun'
import { registerApps } from '@/utils/qiankun'
export default {mounted() {if (!window.qiankunStarted) {window.qiankunStarted = trueregisterApps()start({prefetch: "all", // 可选，是否开启预加载，默认为 true。sandbox: { strictStyleIsolation: true }, // 可选，是否开启沙箱，默认为 true。// 从而确保微应用的样式不会对全局造成影响。singular: true, // 可选，是否为单实例场景，单实例指的是同一时间只会渲染一个微应用。默认为 true。});}}
}
</script>

1、主应用主要提供 Login、Layout、Home、404等基础页面。

2、通过提供qiankun的initGlobalState、registerMicroApps、start等完成主应用的qiankun注册、子应用的注册和数据初始化，监听。

子应用

src/public-path
vue.config.js
main.js

// src/public-path
if (window.__POWERED_BY_QIANKUN__) {// eslint-disable-next-line no-undef__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './public-path'Vue.config.productionTip = falselet instance = nullfunction render(props = {}) {const { container } = propsinstance = new Vue({router,store,render: h => h(App)}).$mount(container ? container.querySelector('#app') : '#app')
}if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {console.log('[vue] vue app bootstraped')
}
export async function mount(props) {console.log('[vue] props from main framework', props);render(props)
}
export async function unmount() {instance.$destroy()instance.$el.innerHTML = ''instance = null
}

// vue.config.js
const { name } = require('./package')module.exports = {devServer: {port: 8003,headers: {'Access-Control-Allow-Origin': '*',},},configureWebpack: {output: {library: `${name}-[name]`,libraryTarget: 'umd', // 把微应用打包成 umd 库格式jsonpFunction: `webpackJsonp_${name}`,},},
}

微应用，主要适配qiankun的逻辑在main.js和vue.config.js中，main里需要将子应用声明周期给export出去，且对webpack的路径进行转换，防止资源找不到；vue.config.js中对资源的output进行设置，libraryTarget为umd，防止资源404。

总结：

主应用

1. 设置config文件，两个变量，一个subApps包含name、entry、container、activeRule，一个microConfig生命周期钩子数组。
2. 一个微应用注册方法registerMicroApps(subApps, microConfig)
3. 一个sub.vue, id设置为微应用的container，挂载dom节点
4. 路由匹配规则，要将activeRule匹配进来。

微应用

1. vue.config.js中output设置umd，library和jsonpFunction也要对应特异处理
2. 设置public-path
3. main.js,引入public-path，且改造render，既要支持自己启动，也要支持微应用启动（在mount中，使用主应用的props启动 render(props)）。