|
|
|
@ -34,6 +34,109 @@ export default { |
|
|
|
} |
|
|
|
``` |
|
|
|
|
|
|
|
在`<route-view />`内容块中以下面代码代替: |
|
|
|
|
|
|
|
```vue |
|
|
|
<transition-group name="page-transition"> |
|
|
|
<!-- <route-view /> --> |
|
|
|
<route-view :key="'main'" /> |
|
|
|
<!-- 子应用渲染区,用于挂载子应用节点 --> |
|
|
|
<section :key="'frame'" id="frame"></section> |
|
|
|
</transition-group> |
|
|
|
``` |
|
|
|
|
|
|
|
`micro/apps.js`: |
|
|
|
|
|
|
|
```js |
|
|
|
const apps = [ |
|
|
|
/** |
|
|
|
* name: 微应用名称 - 具有唯一性 |
|
|
|
* entry: 微应用入口 - 通过该地址加载微应用 |
|
|
|
* container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上 |
|
|
|
* activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用 |
|
|
|
*/ |
|
|
|
{ |
|
|
|
name: 'testMicro', |
|
|
|
entry: '//192.168.0.87:7101', |
|
|
|
container: '#frame', |
|
|
|
activeRule: '/testMicro', |
|
|
|
}, |
|
|
|
] |
|
|
|
|
|
|
|
export default apps |
|
|
|
``` |
|
|
|
|
|
|
|
`micro/index.js`: |
|
|
|
|
|
|
|
```js |
|
|
|
// 一个进度条插件 |
|
|
|
import NProgress from "nprogress"; |
|
|
|
import "nprogress/nprogress.css"; |
|
|
|
// import { message } from "ant-design-vue"; |
|
|
|
import { registerMicroApps, initGlobalState, addGlobalUncaughtErrorHandler, start } from 'qiankun'; |
|
|
|
|
|
|
|
// 子应用注册信息 |
|
|
|
import apps from "./apps"; |
|
|
|
|
|
|
|
/** |
|
|
|
* 注册子应用 |
|
|
|
* 第一个参数 - 子应用的注册信息 |
|
|
|
* 第二个参数 - 全局生命周期钩子 |
|
|
|
*/ |
|
|
|
registerMicroApps(apps, { |
|
|
|
// qiankun 生命周期钩子 - 加载前 |
|
|
|
beforeLoad: (app) => { |
|
|
|
// 加载子应用前,加载进度条 |
|
|
|
NProgress.start(); |
|
|
|
console.log("[qiankun]: registerMicroApps beforeLoad", app.name); |
|
|
|
return Promise.resolve(); |
|
|
|
}, |
|
|
|
// qiankun 生命周期钩子 - 挂载后 |
|
|
|
afterMount: (app) => { |
|
|
|
// 加载子应用前,进度条加载完成 |
|
|
|
NProgress.done(); |
|
|
|
console.log("[qiankun]: registerMicroApps afterMount", app.name); |
|
|
|
return Promise.resolve(); |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
/** |
|
|
|
* 添加全局的未捕获异常处理器 |
|
|
|
*/ |
|
|
|
addGlobalUncaughtErrorHandler((event) => { |
|
|
|
console.error(event); |
|
|
|
// 加载失败时提示 |
|
|
|
// if (event.message && event.message.includes("died in status")) { |
|
|
|
// message.error("[qiankun]: 子应用加载失败,请检查应用是否可运行"); |
|
|
|
// } |
|
|
|
}); |
|
|
|
|
|
|
|
// 初始化 state |
|
|
|
const actions = initGlobalState({ |
|
|
|
token: JSON.parse(localStorage.getItem('pro__Access-Token') || '{}') || {} |
|
|
|
}); |
|
|
|
|
|
|
|
actions.onGlobalStateChange((state, prev) => { |
|
|
|
// state: 变更后的状态; prev 变更前的状态 |
|
|
|
console.log("[qiankun]: onGlobalStateChange ", state, prev); |
|
|
|
}); |
|
|
|
// actions.setGlobalState({ |
|
|
|
// token: JSON.parse(localStorage.getItem('pro__Access-Token') || '{}') || {} |
|
|
|
// }); |
|
|
|
actions.offGlobalStateChange(); |
|
|
|
|
|
|
|
// 导出 qiankun 的启动函数 |
|
|
|
export default start; |
|
|
|
``` |
|
|
|
|
|
|
|
`main.js`: |
|
|
|
|
|
|
|
```js |
|
|
|
import startQiankun from './micro'; |
|
|
|
|
|
|
|
startQiankun(); |
|
|
|
``` |
|
|
|
|
|
|
|
## 编译 |
|
|
|
|
|
|
|
```bash |
|
|
|
|