qiankun

如何在主应用的某个路由页面加载微应用？主应用的children下；

const routes = [
{
    path: '/',
    component: Home,
    redirect: '/app',
    children: [
    { path: '/app', component: Content },
    { path: '/vue/', component: Empty}
    ]
},
// 一定要写这个，防止刷新的时候子应用不加载
{
    path: '/*',
    component: Home
},
];

main.js的时候无需在启动，到指定页面的时候在启动；

<template>
    <div class="app-nav">
        <div>
        <router-link to="/app">主应用</router-link>
        </div>
        <div>
        <router-link to="/vue">子应用</router-link>
        </div>
    </div>
</template>

<script>
import { start } from "qiankun";
import { onMounted } from "vue";

export default {
setup() {
    onMounted(() => {
    if (!window.qiankunStarted) {
        window.qiankunStarted = true;
        start();
    }
    });
},
};
</script>

主子应用之间的样式隔离、同一命名的组件隔离？

样式隔离：原理是使用的shadow dom；

sandbox: { strictStyleIsolation: true }

同一名称的组件隔离：

// 根据运行环境是否是qiankun下，动态导入组件
import isQiankun from "../main";
import { defineAsyncComponent } from "vue";
export default {
name: "Home",
components: {
    HeaderComponent: !isQiankun ? defineAsyncComponent(() =>
    import("../common/header.vue")
    ) : '',
    FooterComponent: !isQiankun ? defineAsyncComponent(() =>
    import("../common/footer.vue")
    ) : '',
    Nav: !isQiankun ? defineAsyncComponent(() =>
    import("../common/nav.vue")
    ) : ''
},
setup() {
    return {
    isQiankun,
    };
},
};

如何从子应用返回主应用？

如果子应用在qiankun的环境下要返回的话，可以使用如下两种方式：

1.把父组件的router传到子组件中；子组件在mounted的时候给window上赋值；
window.rootRouter = props.router;
window.rootRouter.push('/')

2.直接使用浏览器的api  
    window.history.pushState('', '', '/')

如果子应用不在qiankun环境下，使用localhost.href进行跳转；

主子应用之间的数据通信？
- 可以通过props传递；
- 可以在主应用通过 initGlobalState 定义全局状态；通过props传给子应用；

主子应用如何共享第三方组件库以及自己封装的组件？

第三方组件库：externals

// 主、子应用都配置 externals，引入外链地址；子应用开启ignore；
// （但如果主应用开启了样式隔离，子应用开启ignore是有问题的，在主应用中加载的时候不能正确展示样式)

externals: {
    'vue': 'Vue',
    'element-plus': 'ElementPlus'
}

// 主应用需要去掉ignore
<link ignore rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
<script ignore src="//unpkg.com/vue@next"></script>
<script ignore src="//unpkg.com/element-plus"></script>

// 引入使用
import ElementPlus from 'element-plus'
instance.use(ElementPlus);

自己封装的组件跟方法：props、webpack5 Module Federation;

props：可以在父应用使用install注册一个插件（注册所有需要导出的组件），通过props传给子；

// shareComponent.js, 主应用中的共享组件管理插件
import SideBar from '../components/sideBar' //自定义公共组件
import TopBar from '../components/topBar' //自定义公共组件

const shareComponents = [SideBar, TopBar]; // 需要共享给子应用的组件
//vue插件的install方法
const install = function (Vue) {
shareComponents.forEach(component => {
    Vue.component(component.name, component); //注册为Vue全局组件
});
};

export default {
install,
};

// 主应用中的入口文件
import shareComponent from '../src/utils/shareComponent.js'

...
{
    name: 'xxx'
    entry: 'xxx',
    container: '#xxx',
    activeRule: 'xxx',
    props: {
        shareComponent
    }
},
...

// 子应用入口文件
...
export async function mount(props) {
console.log('[vue] props from main framework', props);
Vue.use(props.shareComponent)
}
...

// 子应用的一个组件中
<template>
    <TopBar></TopBar>
</template>

webpack5 Module Federation

// 需要导出的文件
new ModuleFederationPlugin({
    name: 'root_app',
    filename: "root_app.js",
    exposes: {
        './commonExport': './commonExport'
    }
    })

// 引入
new ModuleFederationPlugin({
    name: 'vue_app',
    filename: "vue_app.js",
    remotes: {
        rootApp: 'root_app@http://localhost:8080/root_app.js'
    }
})
// 使用
import { HeaderComponent, utils } from "rootApp/commonExport";

部署？

主应用和子应用可以部署在同一个服务器下，通过目录层级进行区分；主应用部署在一级目录，微应用部署在二/三级目录。微应用必须配置 webpack 构建时的 publicPath 为目录名称；history 路由的微应用需要设置 base ，值为目录名称；

也可以部署在不同的服务器上，这时主应用的就需要通过nginx做一次反向代理，把指向子应用的访问路径转发到子应用的服务入口。例如，主应用在 A 服务器，微应用在 B 服务器，使用路径 /app1 来区分微应用，即 A 服务器上所有 /app1 开头的请求都转发到 B 服务器上。

lhf2/qiankun-project

qiankun