比较好的网站开发项目营销咨询服务
一般场景是对已有应用进行改造,比如接入两个新的工程,但是工程不适合整体嵌入现有应用,那就以当前应用为基座,增加微应用路由,通过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。
总结:
主应用
- 设置config文件,两个变量,一个subApps包含name、entry、container、activeRule,一个microConfig生命周期钩子数组。
- 一个微应用注册方法registerMicroApps(subApps, microConfig)
- 一个sub.vue, id设置为微应用的container,挂载dom节点
- 路由匹配规则,要将activeRule匹配进来。
微应用
- vue.config.js中output设置umd,library和jsonpFunction也要对应特异处理
- 设置public-path
- main.js,引入public-path,且改造render,既要支持自己启动,也要支持微应用启动(在mount中,使用主应用的props启动 render(props))。