基于vue2的qiankun使用步骤(主、子应用都是vue2)

一、基于vue2的qiankun使用步骤(主、子应用都是vue2)

1. 主应用下载qiankun依赖（子应用不需要下载）

npm i qiankun -s // yarn add qiankun

2. 主应用main.js中注册微应用

import { registerMicroApps, start} from 'qiankun';

registerMicroApps([
  {
    name: 'reactApp',			// 自定义的微应用名称
    entry: '//localhost:3000',	// 访问子应用的域名和端口号
    container: '#container',	// 指定子应用渲染的容器（须在页面中提前声明）
    activeRule: '/app-vue',	// 匹配不同子应用的路由规则
  }
]);

start();

3. 子应用src目录下添加public-path.js文件

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

4. 修改子应用的入口文件main.js

import './public-path';						// 导入上一步的js文件
import VueRouter from 'vue-router';			// 用于在入口文件中创建路由实例对象（同router文件中）
import routes from './router';				// 导入router文件中声明的路由规则数组

let router = null;
let instance = null;

function render(props = {}) {
  const { container } = props;
    
  // 创建路由实例对象
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/', 		// 此处需要和主应用中的activeRule相同
    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;
}

5. 子应用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. 子应用路由需改写

• router文件夹中的index.js中只用导出路由匹配规则数组，不用创建路由实例对象，子应用main.js文件中导入routes数组，render函数中创建路由实例对象、创建vue实例对象（见上述步骤4）

2. 主应用的某个路由页面加载子应用（而不是直接在主应用App.vue中）

1. 修改主应用中需要加载子应用的路由规则（routes）

   const routes = [
     {
       path: '/portal/*',
       name: 'portal',
       component: () => import('../views/Portal.vue'),
     },
   ];
   

2. 子应用的activeRule需要加上上述路由规则

   registerMicroApps([
     {
       name: 'app1',
       entry: 'http://localhost:8080',
       container: '#container',
       activeRule: '/portal/app1',			// 加上上述路由规则
     },
   ]);
   

3. 主应用中加载子应用的页面中调用start方法

   import { start } from 'qiankun';
   
   export default {
     mounted() {
       if (!window.qiankunStarted) {
         window.qiankunStarted = true;
         start();
       }
     },
   };
   

4. 主应用入口文件main.js中不需要调用start()方法

3. 子应用css中的背景图片、字体文件加载不出来404

解决方案：子应用main.js文件导入public-path.js时写在所有导入语句的最前面即可

import './public-path';

import ...

三、配置

1. 主应用页面初次加载指定默认加载的子应用（main.js中）

import { setDefaultMountApp } from 'qiankun';

setDefaultMountApp('/homeApp');		// 同activeRule配置的名称（复制粘贴即可）