Vue-cloud-component-loader NPM

brt-micro-spa (微前端)

版本1.0.0 该只适用于 Vue

NPM 安装

# npm install brt-micro-spa -g

使用

Main 主应用集成

import {createApp} from 'vue'
import App from './App.vue'

// app
const $app = createApp(App);
// mount
$app.mount('#main-app');


// 微前端
import {registerMicroApps, start} from 'brt-micro-spa';
// 注册子应用
registerMicroApps([
    {
        name: 'Child1',
        path: '/child1',
        entry: `//127.0.0.1:9001`,
        container: '#micro-app',
        props: {}
    },
    {
        name: 'Child2',
        path: '/child2',
        entry: `//127.0.0.1:9002`,
        container: '#micro-app',
        props: {}
    }
], {
    beforeLoad: () => {
        console.log('加载前')
    },
    afterLoad: () => {
        console.log('加载后')
    }
});

// 启动微前端服务
start({});

Child 子应用 -> main.js

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
// app
const $app = createApp(App);
// router
$app.use(router);


// 微前端服务

// 挂载后再次激活时
export async function activated({props = {}}) {
    console.log('activated', props);
}
// 失效时
export async function deactivated() {
    console.log('deactivated');
}
// 挂载后
export async function mounted({props = {}, assetPublicPath}) {
    // 更改子应用的静态资源地址
    if (assetPublicPath) __webpack_public_path__ = assetPublicPath;
    // mount
    $app.mount('#child1-app');
}
// 卸载
export async function unmount() {}


/**
 * 独立运行
 * */
window.__BRTAPP_MICRO_SERVICE__ || mounted({});

Child 子应用 -> router.js

import {createRouter, createWebHashHistory} from 'vue-router'
import { rewriteMicroAppRouter } from 'brt-micro-spa';

let routes = [
    {
        name: 'Child1',
        path: '/',
        component: () => import('./views/Index.vue')
    }
];

// 扩展vue路由的 路径及事件
const router = rewriteMicroAppRouter('/child1', routes, () => {
    return createRouter({
        history: createWebHashHistory(),
        routes
    });
});


export default router

Child 子应用 -> webpack -> vue.config.js

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    publicPath: '',
    assetsDir: 'static',
    productionSourceMap: false,
    lintOnSave: false,  // 取消 eslint 校验

    devServer: {
        open: false,
        port: 9001,
        headers: {
            'Access-Control-Allow-Origin': '*',
        }
    },

    // 自定义webpack配置
    configureWebpack: {
        resolve: {
            alias: {
                '@': resolve('src'),
            }
        },
        output: {
            // 把子应用打包成 umd 库格式
            library: `child_app_${Date.now()}`,
            libraryTarget: 'umd',
            jsonpFunction: `webpackJsonp_child_app_${Date.now()}`,
        },
    }
};

激活单个独立子应用

import {activeSingleMicroApp} from 'brt-micro-spa';

// 静态激活单个子应用 (与注册的子应用相互独立)
activeSingleMicroApp({
    name: 'Single',
    entry: `//127.0.0.1:9003`,
    container: '#single-app',
    props: {}
});

监听微前端服务路由变化

import {onRouterChange} from 'brt-micro-spa';

// 监听路由变化
onRouterChange(routePath => {
    console.log('router change', routePath); //  /child1 ...
});

API

registerMicroApps

注册由路由控制的子应用集合

示例

registerMicroApps(apps:Array, methods:Object);

Apps

属性	类型	必填	说明
name	String	是	子应用名称
path	String *(唯一值)	是	子应用路径
entry	String	是	子应用项目地址
container	String\|Element	是	子应用承载容器
props	String	否	传递给子应用的扩展参数
base	String	否	根路由路径
keepAlive	Boolean	否	缓存当前子应用

Eethods

属性	类型	说明
beforeLoad	Function	子应用加载前
afterLoad	Function	子应用加载后

start
启动路由的微前端服务
示例
```
start(options:Object);
```
options
属性类型默认必填说明
base String / 否根路由路径
keepAlive Boolean true 否缓存已加载的子应用

属性	类型	默认	必填	说明
base	String	/	否	根路由路径
keepAlive	Boolean	true	否	缓存已加载的子应用

activeSingleMicroApp

激活单个独立子应用

示例

activeSingleMicroApp(app:Object, methods:Object);

App

属性	类型	必填	说明
name	String	是	子应用名称
path	String *(唯一值)	是	子应用路径
entry	String	是	子应用项目地址
container	String\|Element	是	子应用承载容器
props	String	否	传递给子应用的扩展参数
base	String	否	根路由路径
keepAlive	Boolean	否	缓存当前子应用

Eethods

属性	类型	说明
beforeLoad	Function	子应用加载前
afterLoad	Function	子应用加载后

onRouterChange
监听路由路径变化
示例
```
onRouterChange(routePath => {}, isTrigger:Boolean);
```
Params
属性类型必填说明
routerPath Function 是回调方法
isTrigger Boolean 否在某些情况下，可能需要默认执行一下回调方法

属性	类型	必填	说明
routerPath	Function	是	回调方法
isTrigger	Boolean	否	在某些情况下，可能需要默认执行一下回调方法

rewriteMicroAppVueRouter

重写子应用的路由器，内置路由器 push方法，监听beforeEach 路由前置拦截

示例

rewriteMicroAppVueRouter(appPath:String, routes:Array, callback:Function, methods:Object);

Params

属性	类型	默认	必填	说明
appPath	String *(需与主应用注册的path保持一致)	""	是	子应用路径唯一值
routes	Array	[]	是	vue注册的路由组件
callback	Function *(需返回vue 路由器对象)		是	重写回调
methods	Object	{}	否	自定义扩展方法