qiankun+vue微前端实战配置流程详解，包含基座配置、子应用配置、参数传递

qiankun+vue微前端实战配置流程详解，包含基座配置、⼦应⽤配置、参数传递qiankun 集成指引⽂档
qiankun 是⼀个⽣产可⽤的微前端框架，它基于 single-spa，具备 js 沙箱、样式隔离、HTML Loader、预加载等微前端系统所需的能⼒。

qiankun 可以⽤于任意 js 框架，微应⽤接⼊像嵌⼊⼀个 iframe 系统⼀样简单。

⼀、qiankun ⽹址
https:///zh
⼆、安装 qiankun 依赖
$ npm i qiankun -S
三、基座
1、路由模式：history 路由（/router/index.ts）
const router = createRouter({
// history模式
history: createWebHistory(process.env.BASE_URL),
routes,
})
2、注册⼦应⽤，开启服务（main.ts）
import { registerMicroApps, start } from 'qiankun'
// 注册⼦应⽤
registerMicroApps([
{
name: 'usercenter', // ⼦应⽤名称
entry: 'http://localhost:8088', // ⼦应⽤地址，开发环境和⽣产环境值不同，需动态配置
container: '#usercenter', // ⼦应⽤容器
activeRule: '/usercenter', // ⼦应⽤触发规则（路径）
},
])
// 开启服务
start()
3、添加⼦应⽤容器（App.vue）
<div id="usercenter"></div>
4、添加⼦应⽤的服务代理,基座需配置⼦应⽤的服务（vue.config.js）
devServer: {
port: 8033, // 端⼝号
host: '0.0.0.0',
disableHostCheck: true,
headers: { 'Access-Control-Allow-Origin': '*' },
proxy: {
'/api': {// ⼦应⽤1服务
target: process.env.VUE_APP_API_URL,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/spider': {// ⼦应⽤2服务
target: process.env.VUE_APP_API_URL_SPIDER,
changeOrigin: true,
pathRewrite: {
'^/spider': ''
}
}
}
}
四、⼦应⽤
1、路由模式：history 路由（/router/index.ts）
const router = createRouter({
// history模式
history: createWebHistory('/usercenter'),// 前缀需要和基座main.ts⾥⾯配置的激活路由⼀致
routes,
})
2、向基座暴露接⼝，使基座与⼦应⽤互通（main.ts）
const temp: any = window
const isQiankun = temp.__POWERED_BY_QIANKUN__
if (isQiankun) {
__webpack_public_path__ = temp.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
function render(props?: any) {
......
}
export async function mount(props: any) {
render(props)
}
export async function unmount(props: any) {
console.log(props)
}
export async function update(props: any) {
console.log('update props', props)
}
isQiankun || render()
3、修改⼦应⽤打包格式（vue.config.js）
const { name } = require('./package')
const port = 8088
const dev = process.env.NODE_ENV === 'development'
module.exports = {
// 配置publicPath，填写你本机的ip地址
publicPath: dev ? `//192.168.xx.xx:${port}` : process.env.BASE_URL,
// ⾃定义webpack配置
configureWebpack: {
output: {
// 把⼦应⽤打包成 umd 库格式
library: `${name}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${name}`,
},
},
devServer: {
port, // 端⼝号
host: '0.0.0.0',
disableHostCheck: true,
// ⼦应⽤需要⽀持跨域
headers: {
'Access-Control-Allow-Origin': '*',
},
// history模式下的url会请求到服务器端，但是服务器端并没有这⼀个资源⽂件，就会返回404，所以需要配置这⼀项 historyApiFallback: {
index: '/index.html',
},
},
}
五、主⼦应⽤间建⽴通信
1、基座
①通信⽂件（src/actions.ts）
import { initGlobalState, MicroAppStateActions } from 'qiankun'
const initialState = {}
const actions: MicroAppStateActions = initGlobalState(initialState) export default actions
②向⼦应⽤发送数据数据⽰例（ /login.vue ）
// 主应⽤通信
import actions from '@/actions'
const token = `${res.tokenType} ${res.token}`
// 登录成功后，设置 token
actions.setGlobalState({ token })
2、⼦应⽤
①通信⽂件（src/actions.ts）
function emptyAction() {
// 警告：提⽰当前使⽤的是空 Action
console.warn('Current execute action is empty!')
}
class Actions {
// 默认值为空 Action
actions = {
onGlobalStateChange: emptyAction,
setGlobalState: emptyAction
}
/**
* 设置 actions
*/
setActions(actions) {
this.actions = actions
}
/**
* 映射
*/
onGlobalStateChange(...args: any) {
console.log(...args)
// return this.actions.onGlobalStateChange(...args)
}
/**
* 映射
*/
setGlobalState(...args) {
console.log(...args)
// return this.actions.setGlobalState(...args)
}
}
const actions = new Actions()
export default actions
②接收基座发送的数据⽰例（ main.ts ）
import actions from '@/actions'
function render(props?: any) {
if (props) {
// 注⼊ actions 实例
actions.setActions(props)
}
......
}
export async function mount(props: any) {
console.log(props)
// debugger
render(props)
// 注册观察者函数获取主应⽤传递过来的参数
// onGlobalStateChange 第⼆个参数为 true，表⽰⽴即执⾏⼀次观察者函数 props.onGlobalStateChange((state) => {
const { token } = state
if (token) {
localStorage.setItem('ACCESS_TOKEN', token)
}
}, true)
}
......。