「微前端实践」使用Vue+qiankun微前端方案重构老项目的本地验证

3,854 阅读11分钟

「这是我参与2022首次更文挑战的第3天,活动详情查看:2022首次更文挑战」。

10月份换了新的工作,参与完一个月的需求迭代后,接到了项目重构的任务。简单来说,需要在短时间内提出方案设想,同时进行本地验证,最终需要拿出一套技术替换方案来。于是,埋头苦干了一个月,总算干了点成绩出来,今天把当时的思考和实践做个简单总结,就当是个复盘吧。

一、老项目现状

最初接触到的老项目,使用到的前端技术栈主要是(jQuery1.8 + layui-v2.5.4 + ExtJS4.2.1.883),当时拿到这个项目的时候,上手书写起来竟然有点手生,毕竟这几年长时间使用的都是vue和react,jquery的书写方式有点陌生了,同时发现使用的ExtJS4.2.1.883(2011年发布)版本陈旧、 layui-v2.5.4于2021年7月也已停止更新。这两种框架,一种学习曲线高,一种停止更新后可能后续碰到复杂问题没有地方可查,所以还是想着整体上去替换。

二、提出设想

由于当前项目,子模块众多,且每个模块涉及功能也很多,老项目中将所有模块都独立成单独文件夹,在菜单点击时,获取模块url,然后基于iframe方式接入。这种方式存在的问题是:

  • 每个模块都单独使用文件,公共文件不能共享,模块越多,文件越多。
  • iframe方式引入,每次加载都需要重建浏览器上下文、资源重新加载,导致缓慢。
  • iframe方式引入的模块,与父窗口数据完全隔离,但该项目又并非是微前端项目,隔离后的数据传递步骤繁琐。 考虑到老项目中引入iframe思想,已经有了微前端的影子,于是,我在设想中引入了qiankun微前端方案。

2.1 微前端技术简介

那到底什么是微前端呢?首先微的概念,就是小的意思,小是相对于大来说的。也就是说,在项目模块增加,功能增多,业务日趋复杂的情况下,一个普通应用会逐渐成为巨石应用,巨石应用在维护成本与难度上也逐渐会出现问题。如果把庞大的应用,拆分成小型应用,然后根据小型应用去开发,在人员管理、技术把控上也会更加容易。微前端的优点大家可在qiankun官网上自行查看,这里不再赘述。

除了考虑引入微前端技术之外,我在设计时还创建了一个公共库,因为最终的微应用都会合在主应用中,作为一个整体呈现到用户眼前,这里必须要保证公用的样式,除此之外,在每个应用中会存在一些工具方法,如对数据格式的处理、时间处理等,因此还构建了一个公共库。

2.2 微应用拆分

已经确认使用微前端的思想,那么最重要的一个任务就是对微应用进行拆分。拆分原则上,可以根据共性业务功能去抽取,也可以根据目前已有的菜单管理去抽取,由于是在实验阶段,重在验证微前端实现上,因此我直接按照已有的菜单去抽取了对应微应用。

2.3 技术架构

在系统架构方面,主应用能动态注册微应用,同时通过路由管理接入微应用。

微应用,需要满足单独开发、单独部署、单独测试、同时又能接入到主应用中与主应用同时运行的原则。单独开发时候,需要具有登录、工作台、系统管理等的功能,接入主应用,能够直接接入到内容展示区域。

主应用、微应用根据需求安装公共组件库,同时能够独立部署。架构图涉密,这里就不放出来了。

三、具体实现

主应用与微应用使用到的技术栈(qiankun-2.6.3 + vueCli4.5.0 + vue-2.6.11 + element-ui-2.15.6 ),微应用也可以使用其他技术进行开发,这里技术栈不做限制。后续可以试着接入其他技术栈。

3.1 主应用

主应用利用vue-cli创建项目,vue-cli如何快速创建vue项目,请在Vue CLI官网查阅,默认加入vue-router、vuex生态。注,所有在3.1章节中展示的代码均在主应用项目中,当前主应用项目为micro-front-main

3.1.1 qiankun引入

在主应用中,执行yarn add qiankun,安装qiankun框架。

3.1.2 路由配置

在主应用的src目录下,创建micro文件夹,同时创建app和index.js文件,app.js文件中,配置接入的子应用,index中启动微服务。

在微应用的路由配置上,需要遵循路由配置原则。路由配置需要根据主子路由的模式(history和hash)、主路由是否在某个路由页面加载微应用两个方面进行设计。

  • 第一种情况,主应用路由是history模式,子应用也是history模式,不在主应用的某个路由页面加载微应用,即直接在App.vue中加载微应用。
登录逻辑图
  • 第二种情况,主应用路由是(history/hash)模式,微应用是hash模式,不在主应用的某个路由页面加载微应用。这种与主子路由都是hash模式的方式配置相同,需要注意‘#’
登录逻辑图
  • 第三种情况,主应用路由是history模式,子应用路由是history模式,在主应用的某个路由页面加载微应用,如Home.vue页面加载。

    登录逻辑图
  • 第四种情况,主应用路由是(history/hash)模式,子应用路由是hash模式,在主应用的某个路由页面加载微应用,如Home.vue页面加载。

登录逻辑图
3.1.3 路由具体实现

本文实践的主应用与微应用都是基于hash模式的,同时定义在主页面home.vue中接入微应用,因此在配置路由时,选择上面描述的第四种方式。

  1. 主应用中设置微应用dom节点 在home页面中接入,home页面开放主、微应用dom节点。这里的micro-app在后续微应用引入配置中,需要保持一致。
// pages/home.vue
<div class="content-wrapper">
    <!--主应用渲染,读取的是当前主应用的路由-->
    <router-view v-show="$route.name"></router-view>
    <!--子应用渲染,读取子应用中的对应的路由-->
    <div v-show="!$route.name" id="micro-app"></div>
</div>
  1. 配置路由 在src下新建routers.js文件,在该文件中,配置主、微应用的路由。这里使用name区分主、微应用。与上面home.vue页面中规定的v-show相呼应。
import Home from './pages/Home'
const routers = [
    {
        path: '/home',
        name: 'Home',
        component: Home,
        children: [
            {
                path: '',
                name: 'Dashboard',
                component: Dashboard
            }
        ]
    },
    // 微应用url相关配置,表明所有微应用都是在home页面中接入,不过这里也可以根据自己需要进行定义,不一定要home开始
    {
        path: '/home/*',
        component: Home
    }
]
export default routers
  1. 微应用注册 这里container属性与页面中定义的挂载dom id属性一致。
// micro/app.js,微应用路由注册,注意这里activeRule下的路径配置
const apps = [
    {
        name: 'micro-fronted-query',
        entry: MICRO_FRONTED_DATA_QUERY,
        container: '#micro-app',
        activeRule: getActiveRule('#/home/micro-fronted-query'),
    }
]

export default apps
  1. 导出启动函数
// micro/index.js 
import apps from './app'
// 主应用中注册微应用
registerMicroApps(apps)
addGlobalUncaughtErrorHandler((event) => {
    console.error(event);
    const { message: msg } = event
    if (msg && msg.includes("died in status LOADING_SOURCE_CODE")) {
        console.error("微应用加载失败,请检查应用是否可运行");
    }
});

// 导出启动函数
export default start
  1. 菜单配置 通常菜单都会从接口中直接获取,菜单路径则是在后台管理系统中直接配置,这里配置的菜单,相当于在home.vue页面菜单栏中点击后操作的事件,因此菜单配置的路径也要和上面定义的微应用路由一致。

如菜单1对应路径path为"/home/micro-fronted-query",这里的路径与微应用注册时定义的路径一致

// menu.vue
<el-menu-item v-for="(item, index) in newMenus"
            :key="index"
            :index="item.path"
            @click="addTab(item.name, index+1, item.path)">
        {{ item.name }}
</el-menu-item>
3.1.4 页面中启动qiankun

在主应用中,如果不在根APP.vue中接入微应用,需要去对应接入微应用的页面中调用启动函数。如在App.vue页面中,则start()方法在main.js中进行调用。如在home.vue中接入,则start()方法在Home.vue页面中调用。

// page/home.vue
import qiankunStart from '../micro'
mounted() {
    if (!window.qiankunStarted) {
        window.qiankunStarted = true;
        // 启动qiankun
        qiankunStart();
    }
},

主应用接入的主要功能已完成,下面开始微应用接入工作。

3.2 微应用

微应用同样利用vue-cli框架进行创建,主要做一下几个工作。微应用项目为micro-fronted-query。

3.2.1 登录逻辑

由于微应用需要确保独立运行、测试、部署的能力,因此在具体开发中需要根据项目需要,梳理登录逻辑。在本次测试中,首先利用全局导航守卫判断token是否存在,如果存在的话直接能够读取路由,如果不存在,则进入微应用的登录页面。同时为了防止cookies过期,会在接口请求的拦截器中,判断token是否有效,如果token失效了,也会直接进入微应用的登录页面。

登录逻辑图
3.2.2 创建微服务配置文件

在子应用的src目录下,创建微服务的配置文件public-path.js

// src/public-path.js
if (window.__POWERED_BY_QIANKUN__) {
    // 动态设置 webpack publicPath,防止资源加载出错
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
3.2.3 是否微服务处理

在main.js中根据是否启用微服务,处理渲染逻辑,为了避免根 id #app与其他的 DOM 冲突,需要限制查找范围,同时还需要暴露bootstrap/mount/unmount三个生命周期函数,否则会出现报错或加载不上的问题。

// 微应用的main.js
// 微应用的渲染函数
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    // 设置微服务与独立运行时的路径
    routes : sysRouters.concat(routerConfigs)
  })
  
  vueInstance = new Vue({
    render: h => h(App),
    router
  }).$mount(container ? container.querySelector('#app') : '#app')
}
// 独立运行时,直接读取当前配置
if (!isQiankun) {
  render()
}
/**
 * 暴露bootstrap 
 */
export async function bootstrap() {
  console.log("VueMicroApp bootstraped");
}
/**
 * 暴露mount
 */
export async function mount(props) {
  console.log("VueMicroApp mount", props);
  render(props);
}
/**
 * 暴露unmount
 */
export async function unmount() {
  console.log("VueMicroApp unmount");
  vueInstance.$destroy();
  vueInstance = null;
  router = null;
}
3.2.4 打包配置文件修改

在微应用的根目录下创建vue.config.js文件,在该文件中配置qiankun需要使用到的配置属性。注意configureWebpack属性下的library,需要与微应用注册时的名称相同,这里为了便于出错,可以直接获取package.json中的name值。如果出现了跨域问题,还需要在devServer中配置header跨域信息,这块大家可以查下vue.config.js配置详情

module.exports = {
    configureWebpack: {
        output: {
            library: `${packageName}`,
            libraryTarget: 'umd', // 把微应用打包成 umd 库格式
            jsonpFunction: `webpackJsonp_${packageName}`,
        },
    },
}
3.2.5 路由配置

在微应用的路由配置文件中,需要增加主应用中配置时对应的路由根路径,同时区分是否为微服务,微服务情况下添加路由前缀,非微服务不需要添加。

// 根据是否为微应用,增加前缀prefix
const prefix = window.__POWERED_BY_QIANKUN__ ? '/home/micro-fronted-query' : ''
const appRouters = [
    {
        path: `${prefix}/list`,
        component: () => import('./views/list.vue')
    }
]
export default appRouters

3.3 公共库

除了主、微应用自身逻辑的处理之外,在这个方案当中,又创建了一个公共库,公共库主要能够保证主微应用样式兼容,同时能够对公用组件、方法等进行复用。该公共库同样基于vue进行开发,当然这里可以选择任意技术开发公共库。公共库应用名称为system-common

公共库,主要用于抽取各个应用之间公用的内容,包括系统公共路由配置、业务相关页面如登录、权限、用户协议组件,判断登录方式的api接口,cookie设置与获取的工具方法等。技术上,我们采用VUE框架,开发公共库,同时提供插件暴露的方式,供其他应用使用,vue如何开发插件会在后续文章中更新

公共库可以使用npm发私有包的形式使用,也可以使用yarn add file:/ 的模式,直接安装在本地项目中。

登录逻辑图
3.3.1 公共库插件开发

在src/index.js中,主要暴露插件方法,如,我们在components文件夹下创建了一个共用组件,通过在components/index.js中,使用Vue.component()方法,注册组件。同时将该注册过的组件,在index.js中进行安装。这样我们在其他应用中,只要安装了公共库,就可以使用Vue.use()方法进行使用组件了。

// src/index.js文件
const install = function(Vue) {
    if (install.installed) return;
    install.installed = true;
    // 遍历注册所有组件
    components.map((component) => Vue.use(component));
}

if (typeof window !== "undefined" && window.Vue) {
    install(window.Vue);
}

export default {
    install,  
    ...components, // 共用组件
    cookies,   // 公共cookies
    sysRouters,  // 通用路由
    judgeApi // 通用api方法
};

3.4 项目部署

3.4.1 应用打包

微应用是基于vue进行开发,严格按照vue提供的方式进行打包。

首先在应用中创建.env.*文件,如.env.development.js文件代表的是开发环境下的打包配置,在该配置中,可以配置接口的访问地址,打包路径、node执行环境等。同时修改package.json中script执行脚本的命令,在命令中增加--mode模式。这样就可以根据不同配置进行不同环境的打包。

除了通用打包方式外,还增加了动态微应用配置。这里在.env文件中,增加主应用接入的微应用地址配配置,然后在注册微应用的方法中动态获取,这样在注册微应用时,可以只修改配置文件中的内容就可以完成注册。

登录逻辑图 登录逻辑图
3.4.2 nginx部署

项目部署,在本地测试时,主要采用了nginx进行静态资源重定向。将各个应用,打包之后,配置在nginx相同域名下,就可以实现cookie的数据共享。具体nginx部署,可查询nginx中文官网

登录逻辑图

四、效果图

效果.gif

本文详细介绍了项目中引入qiankun的具体实践步骤,大家可以根据项目需要,选择合适的微前端方案。如果喜欢本文,求赞求关注哦。