此文档未完善

非 iframe 方式，获取地址栏对应的参数加载远程子应用(可跨域)

前提条件：使用 webpack5 的模块联邦构建出 remote-entry.js(默认)的子应用，并且地址栏存在_remote_src（remoteSrcKey 的默认值）和_remote_scope_name(remoteScopeNameKey 的默认值）参数

webpack5 模块联邦插件配置 (最新的 yb-cli 创建的 web 工程已默认配置)

const { ModuleFederationPlugin } = webpack.container;

const moduleScropeName = 'my_child_app';
module.exports = {
    entry: './src/entry.js',
    plugins: [
        new ModuleFederationPlugin({
            name: moduleScropeName,
            library: { type: 'var', name: moduleScropeName },
            // 可变
            filename: 'remote-entry.js',
            // 在YbLoadeRemote中模块名称默认是 './app'
            exposes: {
                './app': './src/app.js',
            },
            // 可变
            shared: ['vue', 'vue-router', 'vue-router-tab', 'core-js'],
        }),
    ],
};

/* ./src/app.js */
/**
 * app.js除了在main.js创建vue实例，也用于webpack5的模块联邦打包后会生成一个 remote-entry.js
 */
import Vue from 'vue';
import App from './App.vue';
let vueInstance = null;
function createApp(options) {
    vueInstance = new Vue({
        render() {
            return <App />;
        },
    }).$mount(options.rootElement);
    return Promise.resolve({
        appInstance: vueInstance,
        rootEl: vueInstance.$el,
    });
}
function destroyApp() {
    if (vueInstance) {
        vueInstance.$destroy();
        vueInstance = null;
    }
    return Promise.resolve();
}
export { createApp, destroyApp };

/* ./src/webpack-entry.js */
import('./main');

/* ./src/main.js */
import { createApp } from './app.js';
createApp({
    rootElement: '#app',
});

基本用法

需要在这测试加载案例的前提

# 使用yb-cli创建一个web工程
npx yb-cli init medical-calculate-web

# 进入medical-calculate-web后打包
npm run build
cd dist
npx http-server
# 可能得到如下地址
Available on:
  http://127.0.0.1:8081
  http://192.168.1.112:8081
Hit CTRL-C to stop the server

之后可以当前浏览器地址栏添加参数例如
?_remote_src="http://192.168.1.112:8081"&_remote_scope_name=medical_calculate_web 回车就能加载

<template>
    <div style="height:50vh;display:flex;flex-direction: column;">
        <yb-load-remote
            remoteAppRouterBasepath="/pages/components/YbLoadRemote"
            :remoteAppProvideData="remoteAppProvideData"
        />
    </div>
</template>

<script>
    export default {
        name: 'layout-route-remote',
        data() {
            return {
                remoteAppProvideData: {
                    hideAppHeader: true,
                },
            };
        },
        provide() {
            return {
                parentAppUrlQuery: {},
            };
        },
    };
</script>

显示 复制 复制

props

参数	说明	类型	可选值	默认值
remoteAppProvideState	传递给子应用的状态，在子应用中接收后不应该改变原对象情况，父应用对状态改变，能够实时响应	object	-	{}
remoteAppProvideData	传递给子应用的数据,在子应用中接收后可以改变原对象	object	-	{}
remoteAppRouterBasepath	子应用路由的基础路径，在使用 yb-load-remote 的所在路由配置的 path 对应即可	string	-	'/remoteApp'
remoteSrcKey	url 参数的 key，用于获取子应用的 remote-entry.js 的路径	string	-	'_remote_src'
remoteScopeNameKey	url 参数的 key，用于获取加载子应用 app 模块的作用域名称	string	-	'_remote_scope_name'
remoteModuleNameKey	url 参数的 key，用于获取加载子应用模块的名称(默认是"./app")称	string	-	'_remote_module_name'