qiankun
什么是qiankun?qiankun 是一个基于 single-spa 的微前端实现库,可帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
什么是微前端
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端架构具备以下几个核心价值:
- 技术栈无关
主框架不限制接入应用的技术栈,微应用具备完全自主权 - 独立开发、独立部署
微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新 - 增量升级
在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术-栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略 - 独立运行时
每个微应用之间状态隔离,运行时状态不共享
应用搭建
- 主应用
在main.js
中增加以下内容
import { createApp } from 'vue'
import App from './App.vue'
import router from './Router'
import { registerMicroApps, start, setDefaultMountApp } from 'qiankun'
let app = null
function initVue() {
app = createApp(App)
app.use(router)
app.mount('#app')
}
// function genActiveRule(routerPrefix) {
// return location => location.pathname.startsWith(routerPrefix)
// }
initVue()
// 设置默认进入的子应用
setDefaultMountApp('#/app2')
// 在主应用中注册微应用
registerMicroApps([
{
name: 'apptwo', // 微应用的名称
entry: '//localhost:8008', // 微应用的 entry 地址
container: '#childMicro', // 微应用的容器节点
activeRule: '#/app2', // 微应用的激活规则
}
])
start()
在App.vue中增加微应用的容器节点
2. 微应用
修改main.js
,如下:
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import './public-path'
let app = null
let router = null
function initApp() {
app = createApp(App)
router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
component: App
}
]
})
app.use(router)
// index.html文件 <div id="apptwo"></div>
app.mount(document.querySelector('#apptwo') ? '#apptwo' : '#app')
}
if (!window.__POWERED_BY_QIANKUN__) {
initApp()
}
export async function bootstrap() {
console.log('vue app bootstraped')
}
export async function mount(props) {
console.log('props from main app', props)
initApp()
}
export async function unmount() {
app.unmount()
app = null
router = null
}
在vue.config.js
中增加以下配置
const { name } = require('./package')
module.exports = {
publicPath: './',
outputDir: 'dist',
devServer: {
port: 8008,
overlay: {
warnings: true,
errors: true
},
headers: {
'Access-Control-Allow-Origin': '*',
}
},
configureWebpack: {
output: {
// 把子应用打包成 umd 库格式
library: `${name}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`,
}
}
}
新建pubulic-path.js
文件,增加以下内容
// https://webpack.docschina.org/guides/public-path/#on-the-fly
if (window.__POWERED_BY_QIANKUN__) {
// eslint-disable-next-line no-undef
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
总结
以上是小编使用qiankun和两个vue项目实现微前端的过程,另外微前端还有其它的实现方式,如路由分发、微应用、将iframe作为容器等,可自行了解。