【微前端乾坤】 vue2主应用、vue2+webpack子应用，vue3+webpack子应用、vue3+vite子应用的配置

2024-03-05 01:20
文章标签 javascript 配置 应用 vue vue3 前端 vue2 frontend vite webpack 乾坤

本文主要是介绍【微前端乾坤】 vue2主应用、vue2+webpack子应用，vue3+webpack子应用、vue3+vite子应用的配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

因公司需求， 需要将原本vue2+iframe 形式的项目改成微前端乾坤的方式。

之前iframe都是直接嵌套到vue2项目的二级目录或者三级目录下的(反正就是要随处可嵌)

注意使用场景：原本vue2+iframe 形式的项目改成微前端乾坤的方式，将vue2改成微服务的主应用（基座），之前iframe嵌套在vue2项目中的其他页面的系统改成微服务的子应用，嵌套的只是子应用路由中的一个页面 ， 也就是 主应用 的一个 路由页面 对应 子应用 的一个 路由页面 ， 不是那种常规的一个出口包含了整个子应用，一下主应用的配置主要是针对我这种需求弄的， 子应用大部分都是通用的

一、乾坤介绍

1、简介

简单：无论你使用什么技术栈，都可以轻松地将子应用接入到主应用中，就像使用 iframe 一样简单。
完备：qiankun 提供了丰富的功能，包括样式隔离、沙箱、预加载等，为开发者解决微前端架构中的各种问题。
生产可用：qiankun 已经在蚂蚁金服内部和外部的 200+ 应用中得到验证，是一个值得信赖的生产可用解决方案。


2、qiankun 的设计理念

qiankun 的设计理念主要体现在两个方面：技术栈无关和技术栈无关。技术栈无关：qiankun 不限制子应用的技术栈，无论是 React、Vue 还是 Angular，都可以轻松地接入到主应用中。这样可以消除应用之间的隐性依赖，实现真正的技术栈无关。
接入简单：qiankun 的目标是让接入微前端的过程就像使用 iframe 一样简单，从而尽可能减少对旧应用的改造工作量。


3、qiankun 的技术实现与选择

qiankun 在技术实现上主要解决了两个问题：应用的加载与切换和应用的隔离与通信。应用的加载与切换：qiankun 通过使用 single-spa，实现了应用的懒加载、路由处理和应用入口选择等功能。
应用的隔离与通信：qiankun 使用 JS 沙箱和样式隔离技术，确保子应用之间的 JS 和 CSS 不会发生冲突。同时，qiankun 提供了父子应用和子子应用之间的通信机制，实现了应用之间的数据传递和交互。

二、项目改造

我的项目目录格式

 1、主应用（base）
        1）、yarn add qiankun -S / npm i qiankun -S 安装乾坤
        2）、在需要嵌套子应用页面的页面（主应用指定菜单下，之前iframe页面的地方）添加如下内容：在文件中准备子应用出口容器， 然后script中引入loadMicroApp方法加载子应用
<!--* @Description: ------------ fileDescription -----------* @Author: snows_l snows_l@163.com* @Date: 2023-09-13 18:02:20* @LastEditors: snows_l snows_l@163.com* @LastEditTime: 2024-02-27 12:19:54* @FilePath: /digital-qiankun-common/base/src/views/machineRoom/index.vue
--><template><div id="microAppContainer"></div>
</template><script>
import { loadMicroApp } from "qiankun";export default {data() {return {microApp: null,};},mounted() {this.microApp = loadMicroApp({name: "cmdb",entry: "//localhost:8991/",  // 子应用部署的服务地址、这里因为都是本地开所以是localhost,到时候部署到那个服务器就是那个服务器地址container: "#microAppContainer",// props 传参props: {token: sessionStorage.getItem("token"),localLogin: sessionStorage.getItem("local_login"),roleNamesStr: sessionStorage.getItem("roleNamesStr"),},},{// 是否开启沙箱样式隔离sandbox: {// experimentalStyleIsolation: false, // 沙箱隔离// strictStyleIsolation: false,  // 样式隔离（处于实验阶段）， 是导致主应用的样子错乱， 用的话请检查主应用的样式是否被影响},// 是否为单实例场景，单实例指的是同一时间只会渲染一个微应用。默认为 false。singular: true,});},updated() {if (this.microApp) {this.microApp.update();}},beforeDestroy() {if (this.microApp) {this.microApp.unmount();}},
};
</script>

        3）、路由：由于是多对多的问题， 主应用需要包含菜单，头部logo什么的， 所以需要包含在layout组件内， 因此修改主应用路由与子应用相同（相当于主应用与子应用使用同一个路由），路由的component都指定同一个vue文件，因为只有子应用的入口就只有这个一个文件。如下
// 主应用：
{path: "/operations/machineRoom",redirect: { name: "MachineRoom" },component: Layout,meta: { title: "多云现场设备管理", icon: "资源展示" },children: [{path: "machineRoom",name: "MachineRoom",component: () => import("@/views/machineRoom/index"), // 同一个页面},{path: "hardware",name: "Hardware",component: () => import("@/views/machineRoom/index"), // 同一个页面},],
},// 子应用路由：
{name: 'resource',path: '/operations/machineRoom/:code',component: () => import('@/pages/resource/index')
}

这样主应用就搭建好了， 给子应用留了出口

2、vue2子应用

        我这里子应用用的histor模式的路由， 子应用用的都是

        1）、在src目录下添加public-path.js文件， 并在main.js入口文件中引入， public-path.js的内容如下：

if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
        2）、并在main添加（改造成）如下：

        在入口文件中将渲染方式改造成乾坤子应用的渲染与独立运行的渲染方式以及导出生命周期钩子函数，改造成如下：----- 根据自己应用参看配置

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import './public-path';
import routes from './router';Vue.config.productionTip = false;let router = null;
let instance = null;function render(props = {}) {const { container } = props;router = new VueRouter({base: window.__POWERED_BY_QIANKUN__ ? '/#/' : '/',mode: 'history',routes});instance = new Vue({router,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;router = null;
}

        3）、路由：主应用的路由于微应用的路由保持一直（主应用中已经提到）

        4）、在webpack.config.js 或者 vue.config.js中添加如下内容：

const { name } = require("./package");
devServer: {port: 8031,headers: {"Access-Control-Allow-Origin": "*", },
},configureWebpack: {output: {library: `${name}-[name]`,libraryTarget: "umd", // 把微应用打包成 umd 库格式},
},

        5）、打包，需要打包成umd库格式，配置如下

        webpack5打包 添加如下内容：

const packageName = require('./package.json').name;
module.exports = {output: {library: `${packageName}-[name]`,libraryTarget: 'umd',chunkLoadingGlobal: `webpackJsonp_${packageName}`,},
};

        webpack4打包 添加如下内容

const packageName = require('./package.json').name;module.exports = {output: {library: `${packageName}-[name]`,libraryTarget: 'umd',jsonpFunction: `webpackJsonp_${packageName}`,},
};

4、vue3子应用（webpack打包）
        1)、在入口文件中将渲染方式改造成乾坤子应用的渲染与独立运行的渲染方式以及导出生命周期钩子函数，改造成如下：----- 根据自己应用参看配置
/** @Description: ------------ fileDescription -----------* @Author: snows_l snows_l@163.com* @Date: 2023-09-26 09:05:04* @LastEditors: snows_l snows_l@163.com* @LastEditTime: 2024-03-01 16:04:40* @FilePath: /digital-qiankun-common/cmdb_vue/src/main.js*/
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import './public-path';
import routers from './routers/index.js';
import myPinia from './store';let app = null;
let router = null;const render = container => {app = createApp(App);// 如果是在主应用的环境下就挂载主应用的节点，否则挂载到本地router = createRouter({history: createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/#/' : '/'),routes: routers});const appDom = container ? container.querySelector('#app') : '#app';app.use(router);app.use(Antd);app.use(myPinia);app.mount(appDom);
};// 独立运行
if (!window.__POWERED_BY_QIANKUN__) {render(null);
}export async function bootstrap() {console.log('[vue] vue app bootstraped');
}export async function mount(props) {render(props.container);
}export async function unmount() {app.unmount();app = null;router = null;
}
        2)、在main.js同级目录添加public-path.js文件， 并在main.js中引入
if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
        3)、在vue.config.js的server添加如下内容
headers: {'Access-Control-Allow-Origin': '*' // 主应用获取子应用时跨域响应头
}
        4)、固定端口，主应用中会用到(开发环境用，发布的时候用的子应用部署的服务器地址)

3、vue3子应用（vite）
        1）、安装vite的乾坤插件
yarn add vite-plugin-qiankun -D / npm i vite-plugin-qiankun -D
        2）、在入口文件中将渲染方式改造成乾坤子应用的渲染与独立运行的渲染方式以及导出生命周期钩子函数，改造成如下：----- 根据自己应用参看配置
/** @Description: ------------ fileDescription -----------* @Author: snows_l snows_l@163.com* @Date: 2023-09-26 09:05:04* @LastEditors: snows_l snows_l@163.com* @LastEditTime: 2024-02-27 10:36:31* @FilePath: /digital-qiankun-common/CMDB/src/main.js*/import { qiankunWindow, renderWithQiankun } from 'vite-plugin-qiankun/dist/helper';
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import routers from './routers/index.js';import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import myPinia from './store';let app = null;
let router = null;const render = container => {app = createApp(App);// 如果是在主应用的环境下就挂载主应用的节点，否则挂载到本地router = createRouter({history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/#/' : '/'),routes: routers // `routes: routes` 的缩写});const appDom = container ? container.querySelector('#app') : '#app';app.use(router);app.use(Antd);app.use(ElementPlus, {locale: zhCn});app.use(myPinia);app.mount(appDom);
};if (!qiankunWindow.__POWERED_BY_QIANKUN__) {render(null);
} else {renderWithQiankun({// bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap// 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等bootstrap() {},// 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法，也可以接受主应用传来的参数mount(_props) {console.log('-------- 子应用 mount --------', _props);_props.localLogin && sessionStorage.setItem('localLogin', _props.localLogin);_props.roleNamesStr && sessionStorage.setItem('roleNamesStr', _props.roleNamesStr);_props.token && sessionStorage.setItem('token', _props.token);render(_props.container);},// 应用每次 切出/卸载 会调用的unmount方法，通常在这里我们会卸载微应用的应用实例unmount(_propsy) {app.unmount();app = null;router = null;},update: function (_props) {render(_props.container);}});
}

        3）、在vite.config.js中plugins中配置乾坤插件以及其他配置，参考配置如下：
import qiankun from 'vite-plugin-qiankun';base:’/’，  // 静态资源访问路径。 发布到线上的时候需要改成完整的地址， 不然访问主应用的域名导致拿不到
plugins: [vue(),qiankun('cmdb', {useDevMode: true})],server:{headers: {'Access-Control-Allow-Origin': '*' // 主应用获取子应用时跨域响应头},origin: 'http://localhost:8991/' 
}

        4）、打包

// 修改在vite.config.js
base:’http://localhost:8991’ // 应用部署的服务器地址// 在output中添加format: 'umd',打包成库格式
build:{rollupOptions:{output:{format: 'umd'}}
}

三、觉得重要的地方提醒一下

        1、子应用推荐 history 模式的路由；

        2、只有主应用需要安装乾坤；

        3、注意本地开发与部署到线上的子应用的地址；

        4、子应用需要导出bootstrap、mount、unmount钩子函数工乾坤调用， 并在mount中拿到container去渲染子应用；

        5、子应用必须打包成 umd 格式；

        6、子应用部署的时候需要开启允许跨域访问，配置如下：                

                # 允许跨域请求的域, * 表示所有add_header 'Access-Control-Allow-Origin' *;# 允许携带Cookieadd_header 'Access-Control-Allow-Credentials' 'true';# 允许请求的方式 比如常用的Restful GET/PUT/POST/DELETEadd_header 'Access-Control-Allow-Methods' *;# 允许请求的headeradd_header 'Access-Control-Allow-Headers' *;

        7、乾坤导出三个api，registerMicroApps, start以及loadMicroApp， registerMicroApps, start是搭配使用的， 使用registerMicroApps, start的时候需要添加activeRule去匹配路由（当匹配到activeRule值开头的路由的时候就会自动加载子应用）， loadMicroApp是单独使用的， 不需要activeRule去匹配路由的

这篇关于【微前端乾坤】 vue2主应用、vue2+webpack子应用，vue3+webpack子应用、vue3+vite子应用的配置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/774878。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
Zookeeper安装和配置说明

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种，单机模式和集群模式以及伪集群模式。 ■ 单机模式：Zookeeper只运行在一台服务器上，适合测试环境； ■ 伪集群模式：就是在一台物理机上运行多个Zookeeper 实例； ■ 集群模式：Zookeeper运行于一个集群上，适合生产环境，这个计算机集群被称为一个“集合体”（ensemble） Zookeeper通过复制来实现
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
CentOS7安装配置mysql5.7 tar免安装版

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
hadoop开启回收站配置

hadoop开启回收站配置

开启回收站功能，可以将删除的文件在不超时的情况下，恢复原数据，起到防止误删除、备份等作用。 开启回收站功能参数说明 （1）默认值fs.trash.interval = 0，0表示禁用回收站；其他值表示设置文件的存活时间。 （2）默认值fs.trash.checkpoint.interval = 0，检查回收站的间隔时间。如果该值为0，则该值设置和fs.trash.interval的参数值相等。
阅读更多...
NameNode内存生产配置

NameNode内存生产配置

Hadoop2.x 系列，配置 NameNode 内存 NameNode 内存默认 2000m ，如果服务器内存 4G ， NameNode 内存可以配置 3g 。在 hadoop-env.sh 文件中配置如下。 HADOOP_NAMENODE_OPTS=-Xmx3072m Hadoop3.x 系列，配置 Nam
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2