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 时也须要判断运行环境