micro.jpeg
前言
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
quankun 微前端架构
quankun + vue 前端微应用化实现
案例代码中有详细注释说明
github下载地址 front-micro-app
项目结构
├── portal 主应用
├── product 产品业务子应用
├── trade 订单业务子应用
主应用
1、安装 qiankun
yarn add qiankun # 或者 npm i qiankun -S
2、在主应用中注册微应用
import { registerMicroApps, start ,setDefaultMountApp} from 'qiankun';
/**
* [基于路由配置]
* 通过将微应用关联到一些 url 规则的方式，实现当浏览器 url 发生变化时，自动加载相应的微应用的功能。
* registerMicroApps(apps, lifeCycles?)
*/
registerMicroApps(
// apps - Array<RegistrableApp> - 必选，
[
{
name: 'product', // 微应用名称，确保微应用唯一
entry: '//localhost:7702', // 微应用入口地址
container: '#container', // 微应用的容器节点的选择器或者 Element 实例
activeRule: '/product', // 微应用的激活规则 （支持直接配置字符串或字符串数组，当配置为字符串时会直接跟 url 中的路径部分做前缀匹配，匹配成功表明当前应用会被激活。）
},
{
name: 'trade',
entry: '//localhost:7703',
container: '#container',
activeRule: location => location.pathname.startsWith('/trade')
},
],
// 微应用的一些注册信息 lifeCycles - LifeCycles - 可选，全局的微应用生命周期钩子
{
beforeLoad: app => console.log('before load', app.name),
beforeMount: [
app => console.log('before mount', app.name),
],
}
);
// 设置主应用启动后默认进入的微应用
setDefaultMountApp('/product');
/**
* prefetch - boolean | 'all' | string[] | (( apps: RegistrableApp[] ) => { criticalAppNames: string[]; minorAppsName: string[] }) - 可选，是否开启预加载，默认为 true。
* 配置为 true 则会在第一个微应用 mount 完成后开始预加载其他微应用的静态资源，配置为 'all' 则主应用 start 后即开始预加载所有微应用静态资源。
* 配置为 'all' 则主应用 start 后即开始预加载所有微应用静态资源。
* 配置为 string[] 则会在第一个微应用 mounted 后开始加载数组内的微应用资源
* 配置为 function 则可完全自定义应用的资源加载时机 (首屏应用及次屏应用)
* sandbox - boolean | { strictStyleIsolation?: boolean } - 可选，是否开启沙箱，默认为 true。
* 当配置为 { strictStyleIsolation: true } 表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。
* singular - boolean | ((app: RegistrableApp<any>) => Promise<boolean>); - 可选，是否为单实例场景，默认为 true。
* fetch - Function - 可选，自定义的 fetch 方法。
* getPublicPath - (url: string) => string - 可选
* getTemplate - (tpl: string) => string - 可选
*/
start({
singular: true
});
子应用
1、main.js 导出相应的生命周期钩子
/**
* 微应用静态资源一定要支持跨域
* qiankun 将会在微应用 bootstrap 之前注入一个运行时的 publicPath 变量
* runtime publicPath 主要解决的是微应用动态载入的 脚本、样式、图片 等地址不正确的问题。
*/
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
let router = null; // 路由
let instance = null; // vue实例
// 微应用渲染方法
function render() {
router = new VueRouter({
base: window.__POWERED_BY_QIANKUN__ ? '/product' : '/',
mode: 'history',
routes,
});
router.beforeEach((to, from, next) => {
const title = to.meta && to.meta.title;
if (title) {
document.title = title;
}
next();
});
instance = new Vue({
router,
render: h => h(App),
}).$mount('#app');
}
// 独立项目运行时 渲染
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
/**
* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
*/
export async function bootstrap() {
console.log('产品微应用初始化 bootstrap');
}
/**
* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
*/
export async function mount(props) {
console.log('产品微应用渲染', props);
render();
}
/**
* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
*/
export async function unmount() {
console.log('产品微应用卸载');
instance.$destroy();
instance = null;
router = null;
}
/**
* 可选生命周期钩子，仅使用 loadMicroApp(手动加载) 方式加载微应用时生效
*/
export async function update(props) {
console.log('update props', props);
}
2、vue.config.js 配置微应用的打包工具
const packageName = require('./package.json').name;
module.exports = {
output: {
library: `${packageName}-[name]`,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${packageName}`,
},
};
The end 🔚
Thank you for reading
如果觉得文章对你有所帮助，点个赞吧👍
网友评论