关于qiankun:vue-项目作为子应用-接入-qiankun-框架-改造笔记

qiankun 官网:https://qiankun.umijs.org/zh/

vue 微利用官网文档:https://qiankun.umijs.org/zh/guide/tutorial#vue-%E5%BE%AE%E5%…

先看官网文档介绍的步骤：

1，增加并引入 public-path.js

官网代码如下：

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

qiankun 框架在加载微利用时，会给微利用注入一些全局变量，其中蕴含了 POWERED_BY_QIANKUN 和 INJECTED_PUBLIC_PATH_BY_QIANKUN 这两个变量。

POWERED_BY_QIANKUN 是一个布尔值，用于判断以后利用是否是在 qiankun 框架下运行。
INJECTED_PUBLIC_PATH_BY_QIANKUN 是在运行时注入的以后微利用的动态资源门路。

通过判断 POWERED_BY_QIANKUN 变量的值，能够确定以后利用是否在 qiankun 框架下运行。如果是，则将 INJECTED_PUBLIC_PATH_BY_QIANKUN 的值赋给 __webpack_public_path__，这样在动静加载资源时，Webpack 就会应用正确的门路来加载模块。

这种动静设置 publicPath 的形式能够确保在微利用中动静加载的资源门路都是正确的，使得微利用可能失常运行在 qiankun 框架的环境中。

2，入口文件 main.js 批改，为了防止根 id #app 与其余的 DOM 抵触，须要限度查找范畴

集体对这句话的了解是一个零碎内会接入多个微利用，也就可能会有多个 #app 所以代码里就有了

container ? container.querySelector('#app') : '#app'

因为 container 是从基座 (主利用) 传过来的，具体原理不做剖析，照着官网写就好了。
官网代码片段如下：

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;
}

其中 bootstrap，mount，unmount 就是生命周期钩子，在官网文档中介绍生命周期钩子应用 react 做的实例，在这里：https://qiankun.umijs.org/zh/guide/getting-started#1-%E5%AF%B…

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}`,
    },
  },
};

集体踩坑记录

首先，qiankun 是一个绝对成熟的框架了，用户量还是不错的，在遇到问题时，能够先翻阅一下官网的常见问题，或各大论坛。大概率会有前人遇到过雷同的问题了、简略记录一下本人在革新过程中遇到的几个问题。

1，图标失落

起因：wabpack 打包出的文件在加载时会应用运行时 publicPath：webpack_public_path，而字体图标不会
办法：vue.config.js 中增加如下代码

...
module.exports = {
...
  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
      })
...
}
}

2，路由革新

接入主利用后，路由模式以及子利用的 base 都是须要革新的，在官网常见问题中有介绍。
因为我的我的项目须要同时接入两个 qiankui 零碎，所以的的 base 也就有了以下代码：

if(window.__POWERED_BY_QIANKUN__){base=window.location.host=='XXX.XXX1.com'?`${process.env.VUE_ROUTER_BASE1}`:`${process.env.VUE_ROUTER_BASE2}`
}
const createRouter = () => new Router({scrollBehavior: () => ({y: 0}),
  base,
  mode:"history",
  routes: constantRoutes
})

3,axios 革新

利用嵌入 qiankun 后，发送申请应该往哪里发送？惯例操作是改为发往主利用，由主利用做代理转发，否则会触发跨域申请。
所以创立 axios 时也须要判断运行环境