qiankun 微前端，基座为vue2，完整配置流程

qiankun 微前端，基座为vue2，完整配置流程

引用

CSDN

1.

https://blog.csdn.net/weixin_45970289/article/details/143000337

本文详细介绍了qiankun微前端框架的配置流程，包括基座和子应用的配置步骤。文章内容详细，包含了具体的代码示例，适合有一定前端开发基础的读者学习参考。

基座配置

创建 Vue 项目

vue create qiankun-main

路由模式要使用 history

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: "/", //配合nginx生产发布,https://xxx.com//qiankun-main,具体根据部署动态修改
    mode: 'history',//路由模式使用history
    routes
})
export default router

添加 qiankun 的插件

npm install qiankun

新建配置文件

在 src 下 创建 micros 文件夹，里面添加两个文件 apps.js和index.js

apps.js 里面

每次添加一个子应用，只需要在 apps 的数组里配置即可

const apps = [
    /**
     * name: 微应用名称 - 具有唯一性，子应用中  package.json 中的name  唯一值
     * entry: 微应用入口 - 通过该地址加载微应用
     * container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
     * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
     */
    {
        name: "qiankun-app1",
        entry: "//localhost:8001/qiankun-app1",
        container: "#qiankun",
        activeRule: "/qiankun-app1"
    },
    {
        name: "qiankun-app2",
        entry: "//localhost:8002/qiankun-app2",
        container: "#qiankun",
        activeRule: "/qiankun-app2"
    },
   
];
export default apps;

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;

main.js 里面配置 最下方

//引入qiankun
import startQiankun from "./micros";
//启动微应用
startQiankun();

vue.config.js里面配置

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}`,
        },
    },
}

在 App.vue 中

<template>
  <div id="app">
   <router-link to="/qiankun-app1">qiankunapp1</router-link><br>
   <router-link to="/qiankun-app2">qiankunapp2</router-link><br>
    <!-- 用来显示子应用的页面 -->
    <div id="qiankun"></div>
  </div>
</template>

子应用配置

创建项目

vue create qiankun-app

路由 router 设置

const router = new Router({
    base: '/qiankun-app1', // 如果作为乾坤的子应用则使用主应用中配置的路由前缀，如果是独立运行则使用根目录
    mode: 'history',
    routes  //路由列表
})

添加配置文件 public-path.js

在 src 目录下 和main.js 同级

里面内容

// 1.修改运行时的public-path 主要解决的是微应用动态载入的 脚本、样式、图片 等地址不正确的问题。
if (window.__POWERED_BY_QIANKUN__) {
    //2.读取  package.json中的 name 属性  
    const { name } = require('../package.json');
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ + name+'/';
    console.log('__webpack_public_path__', __webpack_public_path__)
}

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 { name } = require('./package');
module.exports ={
    ...,//其他配置
     publicPath: `/${name}`,
    lintOnSave: false,
    devServer: {
        port: 8001,
        // 关闭主机检查，使微应用可以被 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}`,
        },
    },
}