前言

最近正在開發項目，正好用的qiankun搭建的框架，找時間從新開始搭建了一個示例項目，研究了一下基礎應用，分享一下附上代碼地址，希望對大家有幫助，有問題可以留言交流

項目github地址：

https://github.com/yuzhenyou/qiankun

qiankun乾坤微前端示例

項目説明

主應用和子應用都是通過Vue-cli工具構建，vue2版本項目

• qiankun-main 為主應用
• qiankun-app 為子應用

基本項目結構

一、主應用配置説明（qiankun-main）

src/micros/apps.js 為子應用路由規則

const apps = [
    /**
     * name: 微應用名稱 - 具有唯一性
     * entry: 微應用入口 - 通過該地址加載微應用
     * container: 微應用掛載節點 - 微應用加載完成後將掛載在該節點上
     * activeRule: 微應用觸發的路由規則 - 觸發路由規則後將加載該微應用
     */
    {
        name: "qiankun-app",
        entry: "//localhost:8001/qiankun-app",
        container: "#app",
        activeRule: "/qiankun-app"
    }
];
export default apps;

src/micros/index.js 為子應用註冊主入口

import { registerMicroApps, addGlobalUncaughtErrorHandler, start } from "qiankun";
import apps from "./apps";
/**
 * @description: 註冊微應用
 * 第一個參數 - 微應用的註冊信息
 * 第二個參數 - 全局生命週期鈎子
 */
registerMicroApps(apps,
    {
        beforeLoad: [
            app => {
                console.log('[LifeCycle] before load %c%s', 'color: green;', app.name);
            },
        ],
        beforeMount: [
            app => {
                console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
            },
        ],
        afterUnmount: [
            app => {
                console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
                location.reload(true)
            },
        ],
    }
);
addGlobalUncaughtErrorHandler((event) => {
    const { msg } = event;
    if (msg && msg.includes('died in status LOADING_SOURCE_CODE')) {
        console.log('加載失敗');
    }
});

/**
 * @description: 導出啓動函數
 */
export default start;

src/router/index.js 主路由（base根據實際情況自行修改）

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const Index = resolve => require(['@/views/index'], resolve)

const routes = [
    {
        path: '/',
        name: '主頁',
        component: Index
    }
]

const router = new Router({
    base: "/qiankun-main", //配合nginx生產發佈https://xxx.com//qiankun-main具體根據部署動態修改
    mode: 'history',
    routes
})

export default router

src/main.js 主文件配置

import Vue from 'vue'
import store from './store';
import router from "./router";
import App from './App.vue'

Vue.config.productionTip = false

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


//引入qiankun註冊文件
import startQiankun from "./micros";
//啓動微應用
startQiankun();

微應用跳轉

<template>
  <div class="home">
    <h3 @click="push('/qiankun-app')">click to qiankun-app ！！！</h3>
  </div>
</template>

<script>
export default {
  methods: {
    push(subapp) {
      history.pushState(null, subapp, subapp);
    },
  },
};
</script>

二、子應用配置説明（qiankun-app）

src/public-path.js 為子應用環境變量，用於判斷主應用進入時的url地址

*根路徑項目webpack_public_path = window.INJECTED_PUBLIC_PATH_BY_QIANKUN

*本項目子應用router base為qiankun-app故添加了‘qiankun-app/’後綴，根據項目自行修改

webpack_public_path = window.INJECTED_PUBLIC_PATH_BY_QIANKUN + 'qiankun-app/'

// 1.修改運行時的public-path 主要解決的是微應用動態載入的 腳本、樣式、圖片 等地址不正確的問題。
if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ + 'qiankun-app/';
    console.log('__webpack_public_path__', __webpack_public_path__)
}

src/router/index.js 主路由（base根據實際情況自行修改）

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const Index = resolve => require(['@/views/index'], resolve)
const About = resolve => require(['@/views/about.vue'], resolve)

const routes = [
    {
        path: '/',
        name: 'index',
        component: Index
    },
    {
        path: '/about',
        name: 'about',
        component: About
    }
]

const router = new Router({
    base: '/qiankun-app', // 如果作為乾坤的子應用則使用主應用中配置的路由前綴，如果是獨立運行則使用根目錄
    mode: 'history',
    routes
})

export default router

src/main.js 主文件配置

import Vue from 'vue'
import App from './App.vue'
import router from "./router";

Vue.config.productionTip = false

let instance = null;
// 重新包裝render方法
function render(props = {}) {
    const { container } = props;
    const renderContainer = container ? container.querySelector('#app') : '#app'; // 如果是作為子應用渲染，則渲染到主應用中配置的DOM節點中
    console.log('renderContainer', renderContainer)
    instance = new Vue({
        router,
        render: h => h(App)
    }).$mount(renderContainer);
}
//引入乾坤加載路徑
import './public-path';
// 獨立運行時直接渲染
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;
}

三、vue.config.js配置説明

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir);
  }
const { name } = require('./package');
module.exports = {
    publicPath: `/${name}`,
    lintOnSave: false,
    devServer: {
        port: 8000,
        // 關閉主機檢查，使微應用可以被 fetch，否則會提示生命週期未註冊
        // disableHostCheck: true,
        // 配置跨域請求頭，解決開發環境的跨域問題
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },
    configureWebpack: {
        resolve: {
            alias: {
                '@': resolve('src'),
            },
        },
        output: {
            library: `${name}-[name]`,
            libraryTarget: 'umd', // 把微應用打包成 umd 庫格式
            // jsonpFunction: `webpackJsonp_${name}`, //webpack5廢棄jsonpFunction
            chunkLoadingGlobal: `webpackJsonp_${name}`,
        },
    }
}

四、常見問題參考官方説明

https://qiankun.umijs.org/zh/faq

1. 注意子應用mian.js必須導出生命週期
2. 注意public-path.js的路徑是否正確