qiankun 集成 vue2+webpack

使用 qiankun 集成 vue2+webpack 项目

基座项目

基座项目可见qiankun 示例

子应用改造

子应用不需要额外安装任何其他依赖即可接入 qiankun 主应用

配置环境变量

配置环境变量，是子应用既可以单独运行又可以接入主应用

.env

NODE_ENV=development
VUE_APP_BASE_URL=/

.env.micro

NODE_ENV=development
VUE_APP_BASE_URL=/app1

.env.buildMicro

NODE_ENV=development
VUE_APP_BASE_URL=/app1

然后在 package.json 中配置启动脚本

{
  "scripts": {
    "dev": "vue-cli-service serve",
    "dev:micro": "vue-cli-service serve --mode micro",
    "build": "vue-cli-service build --mode micro",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6"
  }
}

入口文件改造

需要在入口文件中导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用

let app: null | Vue = null;

interface IProps {
  [key: string]: any;
  container?: HTMLElement;
}

export const render = (props: IProps = {}) => {
  if ((window as any).__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = (window as any)
      .__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  }

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

if (!(window as any).__POWERED_BY_QIANKUN__) {
  console.log('并不是qiankun渲染');
  render();
}

export async function bootstrap() {
  console.log('app bootstraped');
}

export async function mount(props: any) {
  console.log(props);
  props.onGlobalStateChange((state: any) => {
    console.log('子应用接收的参数', state);
  }, true);
  render(props);
}

export async function unmount(props: any) {
  if (app) {
    app.$destroy();
    app = null;
  }
  console.log(props);
}

export async function update(props: any) {
  console.log('update props', props);
}

路由改造

vue2 作为子项目时需要将 mode 配置成history，并将 base 换成配置好的环境变量

const createRouter = () =>
  new VueRouter({
    scrollBehavior: (to, from, savedPosition) => {
      if (savedPosition) {
        return savedPosition;
      } else {
        return { x: 0, y: 0 };
      }
    },
    base: process.env.VUE_APP_BASE_URL,
    routes: routers,
    mode: 'history',
  });

修改打包配置

除了导出的生命周期，还要在打包配置中修改

// vue.config.js
const { defineConfig } = require('@vue/cli-service');
const packageName = require('./package.json').name;
const path = require('path');
module.exports = defineConfig({
  lintOnSave: false,
  publicPath: process.env.VUE_APP_BASE_URL,
  configureWebpack: {
    resolve: {
      extensions: ['.js', '.ts', '.vue', '.json']
    },
    output: {
      library: `${packageName}`,
      libraryTarget: 'umd',
    }
  },
});

注册子应用

子应用配置完成后，到基座应用中去注册

const apps: RegistrableApp<any>[] = [
  {
    name: 'app1',
    entry: 'http://localhost:8081/app1',
    container: '#microApp',
    activeRule: '/app1',
  },
];

registerMicroApps(apps);
start();

如果出现跨域问题参考qiankun 集成子项目跨域问题

子应用增加功能

在子应用中添加随意内容，并测试嵌入后是否正常显示

正常加载