Vue2中乾坤框架的入门使用

首先贴上官网：qiankun.umijs.org/zh;

本次初体验是采用Vue2的框架，微前端是可以将多个前端应用整合到一个spa的页面中，不需要像以往一样一个项目只存在一份代码，随着项目逐渐完善，代码量不断增加，难以维护，微前端的出现就是可以将项目中的页面独立分离出来，做成单独的项目，可以使用不同的技术栈、UI组件。

首先：安装两个脚手架，其中一个为主应用，一个为子应用。分别npm i qiankun -S 或者 yarn add qiankun -S;下载安装乾坤。

主应用的main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import { registerMicroApps, start } from 'qiankun'

let apps = [
  {
    name: 'main',
    entry: '//localhost:8083',
    container: '#app',
    activeRule: '/main',
  }
]

registerMicroApps(apps);

start();
new Vue({
  render: h => h(App),
}).$mount('#app')

代码中app数组是声明子应用的路由名称，入口规则。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    }
  }
})

子应用中：首先在src目录下创建public-path.js文件

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

引入main.js中，并且配置

import Vue from 'vue'
import App from './App.vue'
import './public-path';
Vue.config.productionTip = false

let instance = null;
function render(props = {}) {
  const { container } = props;

  instance = new Vue({
    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;
}

如果项目中有eslint检测的话，需要在package.json中配置：

"eslintConfig": {
  ...
    "globals": {
      "__webpack_public_path__": true
    }
  },

然后再配置打包 vue.config.js

const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
   port: 8083
  },
  configureWebpack: {
    mode: 'development',
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
    },
  }
})

最后我们看看效果

可以看出两个独立的项目已经整合到一个项目里去，这样维护起来就很方便很多。