基于qiankun框架的微前端学习之路

简单一句话：
创建两个新项目，项目A和项目B同时npm run dev运行，通过配置路由的方式，能够在项目A中插入项目B的页面或者应用。

---

前言

因为公司业务需求，开始自学微前端

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、qiankun是什么？

qiankun 是一个基于 single-spa 的微前端实现库。

二、使用步骤（以vue技术栈为主）

1.创建两个项目

通过vue create 创建两个新项目：A和B，以A为主应用，以B为微应用

2.在A项目中npm qiankun

代码如下（示例）：

npm i qiankun -S

在main.js中：

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);
   * name: 微应用名称 - 具有唯一性
   * entry: 微应用入口 - 通过该地址加载微应用，这里我们使用 config 配置
   * container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
   * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用

start();

3.在B项目中做以下操作

1.在 src 目录新增 public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

2.在main.js中添加以下内容

import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';

Vue.config.productionTip = false;

let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
    mode: 'history',
    routes,
  });

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

// 独立运行时
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);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

3.打包配置修改vue.config.js

const { name } = require('./package');
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

---

踩坑

踩坑1

启动主应用之后，碰到微应用发起后端请求报404的错误：
看看微应用的vue.config文件里是否有配置proxy代理，
如果有的情况下，主应用的vue.config里也要配置同样的proxy代理。
才能在主应用中访问微应用的后端接口。

踩坑2

以vue为例，子应用如果开启了proxy代理，主应用也要配置proxy代理才不会报404错误，但是假设两个子应用的proxy代理的的字段名是一样的，在主应用该怎么配置？

1：在qiankun环境下 ，你最终子应用设置的代理都会转到主应用上去，也就是说为什么你主应用配置了 为什么就不会出现404
2：proxy prefix 是正则匹配，长度最大，匹配越高，所以你假设 你有相同的prefix，指向不同的target，只需要在某一个prefix前面或者后面再加上一个特殊的字符，在做匹配长度不同，或者是做捕获优先级，比如 /infra ->target 10.190.20.66 那么另外一个就可以写成 /custom/infra => target 10.190.20.67 对应的api，需要转到10.190.20.67地址的API，都要加上/custom/infra就可以了。所有的代理操作都应该是在主应用上进行的，子应用独立配置的代理。在非qiankun下才有效