qiankun

qiankun官方文档

主应用

• 路由配置

• vue路由

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const baseUrl = 'xxx';

export default new VueRouter({
  base: baseUrl,
  mode: 'history',
  routes: [...]
});

• react路由

const baseUrl = 'xxx';

ReactDOM.render(<Router basename={baseUrl}>...</Router>)

• 应用入口文件main.js

import {start, registerMicroApps} from 'qiankun';
export const apps = [
  {
    name: '子应用名称',
    entry: '子应用入口地址',
    container: '主应用中，用来存放子应用的html标签#id',
    activeRule: `${主应用baseUrl}${子应用baseUrl}`
  },
  // ... 其他子应用
];
registerMicroApps(apps);

start();

• 页面视图html代码

vue

<div>
    <!-- 用来存放主应用的路由 -->
    <router-view />
    <!-- 用来存放子应用的html标签#id -->
    <div id="vueApp"></div>
    <!-- 用来存放子应用的html标签#id -->
    <div id="reactApp"></div>
</div>

react

            <Switch>
                <Route path="/review" exact component={Review} />
                {['子应用activeRule'].includes(location.pathname.split('/')[1]) ? 
                (<React.Fragment>
                   <!-- 用来存放子应用的html标签#id -->
                  <div id="vueApp"></div>
                  <!-- 用来存放子应用的html标签#id -->
                  <div id="reactApp"></div>
                </React.Fragment>) :
                <Redirect to="/app-list" />}
              </Switch>

• 需要向子应用接入方（开发人员），提供：

1. 路由的baseUrl

   
   路由的baseUrl

子应用

• qiankun主应用框架中有个全局变量POWERED_BY_QIANKUN

// 通过window.__POWERED_BY_QIANKUN__判断是否是接入qiankun方式启动服务
if (window.__POWERED_BY_QIANKUN__) {
   console.log('在qiankun框架服务中启动')
} else {
  console.log('在自己的开发服务中启动')
}

• 静态资源服务，http响应头需要增加跨域配置

headers: {
    'Access-control-allow-origin': '*'
}

• webpack 配置

• vue.config.js配置

const publicPath = process.env.NODE_ENV === 'production' ? 'https://qiankun.umijs.org/' : `http://localhost:${port}`;

module.exports = {
  configureWebpack: {
    output: {
      library: '应用名称',
      libraryTarget: 'umd',
    },
  }，
  // ...其他配置选项
  chainWebpack: (config) => {
    config.module
      .rule('fonts')
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 4096, // 小于4kb将会被打包成 base64
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[hash:8].[ext]',
            publicPath,
          },
        },
      })
      .end();
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 4096, // 小于4kb将会被打包成 base64
        fallback: {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[hash:8].[ext]',
            publicPath,
          },
        },
      });
  },
}

• webpack.config.js配置

const publicPath = process.env.NODE_ENV === 'production' ? 'https://qiankun.umijs.org/' : `http://localhost:${port}`;

module.exports = {
  output: {
     library: '应用名称',
     libraryTarget: 'umd',
  },
  // ...其他配置选项
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'img/[name].[hash:8].[ext]',
              publicPath,
            },
          },
        ],
      },
      {
        test: /\.(woff2?|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[hash:8].[ext]',
              publicPath,
            },
          },
        ],
      },
    ],
  },
}

• 路由配置

• router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const baseUrl = 'xxx';

export default new VueRouter({
  base: window.__POWERED_BY_QIANKUN__ ? `${qiankun主应用的baseUrl}/${baseUrl}` : baseUrl,
  mode: 'history',
  routes: [...]
});

• 改写应用入口文件

• vue的main.js

/* new Vue({
  router,
  render: h => h(App),
}).$mount('#app') */

let instance = null;
function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    router,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 通过window.__POWERED_BY_QIANKUN__判断是否是接入qiankun方式启动服务
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
} else {
  render();
}

// 导出给主应用接入的三个接口
export async function bootstrap(props) {}
export async function mount(props) {
  render(props);
}
export async function unmount(props) {
  instance.$destroy()
}

• react的main.js

/* ReactDOM.render(<App />, document.getElementById('root'));*/

function render(props = {}) {
  ReactDOM.render(<App />, props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}

// 通过window.__POWERED_BY_QIANKUN__判断是否是接入qiankun方式启动服务
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
} else {
  render();
}

// 导出给主应用接入的三个接口
export async function bootstrap(props) {}
export async function mount(props) {
  render(props);
}
export async function unmount(props) {
  ReactDOM.unmountComponentAtNode(
    props.container ? props.container.querySelector('#root') : document.getElementById('root'),
  );
}

需要向主应用方（开发人员）提供：

1. 应用名称

   
   应用名称

2. 应用入口地址（访问地址：host+port+应用的baseUrl）

   
   应用入口地址