qiankun-vue-test-demo

基于qiankun+vue微前端初實踐

項目地址 ：https://github.com/zjzhangjie/qiankun-vue-test-demo.git

基于qiankun+vue微應用初實踐

主應用

main.js

將注冊qiankun的方法封裝到register文件

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import registerApps from './register/index';
import './common/style/index.less';

Vue.config.productionTip = false;
Vue.use(ElementUI);

let app = null;
app = new Vue({
  el: '#container',
  router,
  store,
  render: h => h(App),
});
// 注冊子應用 registerMicroApps(apps,lifeCycles)
registerApps();

register.js

/**
 *qiankun基礎(chǔ)配置
 * Created by zhangJie on 2020/11/23.
 */
import { registerMicroApps, setDefaultMountApp, start, runAfterFirstMounted, addGlobalUncaughtErrorHandler } from 'qiankun';
import loading from '../progress/index';

import { props, initGlState } from '@/share/';
import { apps, defaultActiveRule } from './apps';
// 定義全局狀態(tài)
initGlState();
const baseurl = `${process.env.BASE_URL}`;
/**
 * 重構(gòu)apps
 */
function filterApps() {
  apps.forEach((item) => {
    item.props = props; // 可選骏令，主應用需要傳遞給微應用的數(shù)據(jù)。
    item.activeRule = genActiveRule(baseurl + item.activeRule);
  });
  return apps;
}
/**
 * 注冊子應用 registerMicroApps(apps,lifeCycles)
 *apps - Array<RegistrableApp> - 必選榔袋，微應用的一些注冊信息
 * 注冊微應用的基礎(chǔ)配置信息凰兑。當瀏覽器 url 發(fā)生變化時，會自動檢查每一個微應用注冊的 activeRule 規(guī)則吏够，符合規(guī)則的應用將會被自動激活。
 */
function registerApps() {
  const _apps = filterApps();
  registerMicroApps(
    _apps,
    {
      beforeLoad: [
        loadApp => {
          console.log('before load', loadApp);
          loading.start();
        },
      ],
      beforeMount: [
        mountApp => {
          console.log('before mount', mountApp);
          loading.done();
        },
      ],
      afterMount: [
        mountApp => {
          console.log('before mount', mountApp);
        },
      ],
      afterUnmount: [
        unloadApp => {
          console.log('after unload', unloadApp);
        },
      ],
    },
  );
  // 設(shè)置默認子應用,與 genActiveRule中的參數(shù)保持一致
  setDefaultMountApp(baseurl + defaultActiveRule);
  // 第一個微應用 mount 后需要調(diào)用的方法播急，比如開啟一些監(jiān)控或者埋點腳本售睹。
  runAfterFirstMounted(() => console.log('開啟監(jiān)控'));
  // 添加全局的未捕獲異常處理器昌妹。
  addGlobalUncaughtErrorHandler(event => console.log(event));
  // 啟動
  start({
    // prefetch: true, // 可選，是否開啟預加載飞崖，默認為 true。
    // sandbox: true, // 可選蒜鸡，是否開啟沙箱牢裳，默認為 true。//從而確保微應用的樣式不會對全局造成影響贰健。
    // singular: true, // 可選伶椿，是否為單實例場景氓侧，單實例指的是同一時間只會渲染一個微應用导狡。默認為 true。
    // fetch: () => {}, // 可選旱捧，自定義的 fetch 方法。
    // getPublicPath: (url) => { console.log(url); },
    // getTemplate: (tpl) => { console.log(tpl); },
    // excludeAssetFilter: (assetUrl) => { console.log(assetUrl); }, // 可選氓癌，指定部分特殊的動態(tài)加載的微應用資源（css/js) 不被qiankun 劫持處理
  });
}
/**
 * 路由監(jiān)聽
 * @param {*} routerPrefix 前綴
 */
function genActiveRule(routerPrefix) {
  return location => location.pathname.startsWith(routerPrefix);
}
export default registerApps;

app.js

抽離app.js 方便配置
import { props } from '@/share/';

export const apps = [
  {
    name: 'children-app-1', // 必選贫橙，微應用的名稱，微應用之間必須確保唯一疲迂。
    entry: '//localhost:8092', // 必選莫湘，微應用的 entry 地址。
    container: '#content', // 子應用掛載的div
    activeRule: 'children-app-1', // 微應用的激活規(guī)則腰池。
    loader: (boolean) => { console.log(`loading狀態(tài)${boolean}`); }, // 可選军洼，loading 狀態(tài)發(fā)生變化時會調(diào)用的方法演怎。
  },
  {
    name: 'children-app-2',
    entry: '//localhost:8093',
    container: '#content', // 子應用掛載的div
    activeRule: 'children-app-2',
  },
];
export const defaultActiveRule = 'children-app-1';
export default {
  apps,
  defaultActiveRule,
};

微應用

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import './public-path';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import common from './common/index';

Vue.config.productionTip = false;
Vue.use(ElementUI);

/* eslint-disable */
let instance = null;
function render() {
  instance = new Vue({
    router,
    render: h => h(App),
  }).$mount('#app');
}
if (!window.__POWERED_BY_QIANKUN__) {render();}
export async function bootstrap(props) {
  common.setCommonData(props)
}
export async function mount(props) {
  common.initGlState(props)
  render();
}
export async function unmount() {
  instance.$destroy();
}
// 增加 update 鉤子以便主應用手動更新微應用
export async function update(props) {
  common.setCommonData(props)
  common.initGlState(props)
}

common.js

import Vue from 'vue';
/**
 * 接受主應用的傳參
 * @param props 主應用穿的公共數(shù)據(jù)
 */
function setCommonData(props) {
  const { data } = props;
  const { publicPath, commonUi, utils, http } = data;
  Vue.prototype.$utils = utils;
  Vue.prototype.$publicPath = publicPath;
  Vue.prototype.$http = http;
  Vue.use(commonUi);// 注冊公共組件
  return {
    publicPath,
    commonUi,
    utils,
  };
}

/**
 * 設(shè)置微應用全局狀態(tài)
 * @param props 主應用穿的公共數(shù)據(jù)
 */
function initGlState(props) {
  console.log('父應用傳的值', props);
  Vue.prototype.$onGlobalStateChange = props.onGlobalStateChange;
  Vue.prototype.$setGlobalState = props.setGlobalState;
  // 設(shè)置通訊
  props.onGlobalStateChange((state, prev) => {
    // state: 變更后的狀態(tài); prev 變更前的狀態(tài)
    alert('子應用監(jiān)聽到主應用改變啦');
  });
}
export default {
  setCommonData,
  initGlState,
};

打包

將所有的應用打包到一個文件夾里

const fs = require('fs-extra');
const path = require('path');
const outputDir = 'qiankun';
// 拷貝文件
fs.copySync(path.join(process.cwd(), '../children-app-1/children-app-1'), path.join(process.cwd(), outputDir, 'children-app-1'));
fs.copySync(path.join(process.cwd(), '../children-app-2/children-app-2'), path.join(process.cwd(), outputDir, 'children-app-2'));

在package.json的scripts中配置

"build:all": "yarn build:register && yarn build:app1 && yarn build:app2 && yarn copyDir",
"build:register": "vue-cli-service build",
"build:app1": "cd ../children-app-1 && yarn build",
"build:app2": "cd ../children-app-2 && yarn build",
"copyDir": "node ./script/build.js",