微前端基座demo

微前端基座demo

主应用/基座配置

main.js

// main.js
import { registerMicroApps, start } from 'qiankun';
const apps = [
    {
        name: 'vueApp', // 应用的名字
        entry: '//localhost:10000', // 默认会加载这个html 解析里面的js 动态的执行 (子应用必须支持跨域) fetch
        container: '#vue', // 容器名
        activeRule: '/home', // 激活的路径
        props: {  // 父应用传递属性给子应用
            a: 1
        }
    },
]
registerMicroApps(apps); // 注册应用
start(); // 开启

App.vue

// App.vue
 <el-menu :router="true" mode="horizontal">
      <el-menu-item index="/">Home</el-menu-item>
      <!-- 引用其他子应用 -->
      <el-menu-item index="/home">vue应用</el-menu-item>
 </el-menu>
    <router-view />
    <div id="vue"></div>  // 挂载容器


// vue.config.js 里需配置与子应用一至的跨域 proxy

子应用配置

main.js

let instance = null;
function render(props = {}) {
    const { container } = props;
    instance = new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount(container ? container.querySelector('#app') : '#app') // 这里是挂载到自己的html中 基座会拿到这个挂载后的html将其插入进去
}

if (window.__POWERED_BY_QIANKUN__) {
    // 使用qiankun, 将微应用的路径放到qiankun的全局变量下面，解决资源加载问题
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
} else {
    // 独立运行微应用, 不使用qiankun
    render();
}

// 微应用协议
export async function bootstrap(props) {
    
}

export async function mount(props) {
    console.log('mount :>> ', props);
    render(props);
}

export async function unmount(props) {
    instance.$destroy();
}

vue.config.js

const packageName = 'vueApp';

module.exports = {
    devServer: {
        port: 3,
        // 支持跨域
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
       
    },
    configureWebpack: {
        output: {
            library: packageName,
            libraryTarget: 'umd',
            jsonpFunction: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal
        }
    }
}

router.js

// 需配置base与主应用activeRule 激活路径一致 否则路由跳转空白
base：'/home'