微前端框架qiankun应用及部署

主应用

1. 安装 qiankun

$ yarn add qiankun # 或者 npm i qiankun -S

2. 在主应用中注册微应用

main.js

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'qiankun-children', //子应用name 和 子应用package.json里"name": "qiankun-children"一致
    entry: '//localhost:8081',
    container: '#yourContainer',
    activeRule: '/dome1',//当配置为字符串时会直接跟 url 中的路径部分做前缀匹配，匹配成功表明当前应用会被激活，子应用router.js base: window.__POWERED_BY_QIANKUN__ ? '/dome1' : '/',
  },
]);

if (!window.qiankunStarted) {
  window.qiankunStarted = true;
  setTimeout(()=>{
    start(
        sandbox: {    //样式隔离
          strictStyleIsolation: true
        }
    );
  },2000)
}

vue.config.js 允许跨域处理

  devServer: {
    port: 8008,
    headers: {
      'Access-Control-Allow-Origin