........吧啦吧啦,【官方上的引入方案介绍的很清楚了,我们这里不做过多赘述】
【场景】
我的场景是做一个集成平台,引入其他系统的时候支持qiankun宿主和iframe宿主两种模式
【使用】 基座应用引入qiankun无非两种模式
-
loadMicroApp(app, configuration?)
//手动引入 -
registerMicroApps(apps, lifeCycles?)
//预先注册
当新打开完整独立的子应用时,可以采用loadMicroAPP的模式,而且个人建议采用这种模式
例如:点击一个系统按钮,打开一个新的tab页面,是这个完整独立的子应用,采用这种模式load子应用可以避免在主应用里做繁琐的预先注册路由的工作
----------------------------------------------------------------------------
当在基座应用里内嵌式的打开子应用时,若此时子应用不只有一个页面,不会切换多路由的时候,采用loadMicroApp的方式也可以,但是若是子应用有多路由,就不能采用这种方式了!!!
我目前采用的路由模式是 ,主子应用都为hash模式
## 主应用
mounted() {
registerMicroApps([
{
name: 'reactApp',
entry: '//localhost:8081',
container: '#container',
activeRule: '/host/star',
},
{
name: 'vueApp',
entry: '//localhost:8080',
container: '#container',
activeRule: '/ap-e',
},
{
name: 'angularApp',
entry: '//localhost:4200',
container: '#container',
activeRule: '/app-angular',
},
]);
// 启动 qiankun
start();
},
复制代码
## 子应用
const routes = [
{
path: '/host/star/home',
name: 'Home',
component: Home
},
{
path: '/host/star/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
复制代码
<div id="app">
<div id="nav">
<router-link to="/host/star/home">Home</router-link> |
<router-link to="/host/star/about">About</router-link>
</div>
<router-view />
</div>
复制代码
部署发版到服务器后,主应用fetch子应用的时候会报跨域问题,nginx配置如下
location /host/star {
alias /home/apc/html/qkchild;
index index.html index.htm;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Headers *;
if ($request_method = 'OPTIONS') {
return 204;
}
}
location /host/static {
alias /home/apc/html/qkchild/static;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Headers *;
if ($request_method = 'OPTIONS') {
return 204;
}
}
复制代码