基于qiankun实现微前端架构

1、应用场景

主应用：vue3.x  +vite+Ts

子应用：模块使用 vue2.x开发

2、加载子应用的方式

qiankun加载子应用的方式分为：基于路由配置（registerMicroApps）和手动加载微应用（loadMicroApp）

根据业务需求现在加载 子应用的方式：

3、本案例采用手动加载微应用方式加载

import { loadMicroApp } from 'qiankun';
 

  const loadApp = (t) => {

        microApp = loadMicroApp({

        name: 'children1', // 应用的名字

        entry: 'http://localhost:8080/', // 默认加载这个html，解析里面的js动态的执行（子应用必须支持跨域，内部使用的是 fetch）

        container: '#children1', // 要渲染到的节点id

        props: { viewer: viewer }, //传参数

      })

    }

  };

4、子应用处理

4.1  子应用引入 public-path.js

(function () {
  if (window.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
    // __webpack_public_path__ = `${process.env.BASE_URL}/`
  }
})()

4.2  修改 main.js

let instance = null

function render (props = {}) {
  const { container, routerBase } = props
  const router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? routerBase : process.env.BASE_URL,
    mode: 'history',
    routes
  })
  // createEarthModule().then(function () {
  // PlotDraw.PIEInstance.setPIE(PIE);
  instance = new Vue({
    router,
    // store,
    render: (h) => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
  // })

}
let _this = this;
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

export async function bootstrap () {
  console.log('[vue] vue app bootstraped')
}

export async function mount (props) {
  console.log('[vue] props from main framework', props)
  window.viewer = props.viewer;  //接受父应用传过来的参数
  render(props)
}

export async function unmount () {
  instance.$destroy()
  instance.$el.innerHTML = ''
  instance = null
}

5、卸载 

 /**
   * 卸载子应用app

      */


  const unloadApp = () => {

    if (microApp) {

      microApp.unmount(); // 卸载微应用

    }

  };

6、解决 字体图标显示问题

使用 url-loader进行转换

  chainWebpack: config => {
    config.module
      .rule("fonts")
      .test(/.(ttf|otf|eot|woff|woff2)$/)
      .use("url-loader")
      .loader("url-loader")
      .tap(options => {
        options = {
          // limit: 10000,
          name: '/static/fonts/[name].[ext]',
        }
        return options
      })
      .end()

  }

7、 样式隔离

7.1 原理

通过修改应用中 elementUi的 前缀来解决样式冲突问题

修改子应用或者主应用都可以

需要安装以下两个 依赖：

"change-prefix-loader"
"postcss-change-css-prefix":

7.2 配置 loader

在vue.config.js文件配置loader

  config.module
      .rule('change-prefix')
      .test(/\.js$/)
      .include.add(path.resolve(__dirname, './node_modules/element-ui/lib'))
      .end()
      .use('change-prefix')
      .loader('change-prefix-loader')
      .options({
        prefix: 'el-',
        replace: 'gp-'
      })
      .end()

7.3   配置 postcss.config.js，如果没有 创建一个新的

const addCssPrefix = require('postcss-change-css-prefix')

module.exports = {
  plugins: [
    addCssPrefix({
      prefix: 'el-',
      replace: 'gp-',
    }),
  ],
}

结果如下：