京东微前端microApp 项目实战

1、什么项目适合做?

公司项目有N个系统构成一个大体积应用，代码越来越多，运行打包十几分钟以上

2、技术栈要求？

目前我说的这版是vue2为基座，子应用vue2，vue3，react都行，vite版本是单独的，自己去官网看着配。

3、基座需要配置修改哪些东西才能跑到子应用呢？

基础配置在基座（包含导航侧边栏登录等，基础组件，不可用的组件扔npm包里，子组件自己下载就行了）

先做基座的配置项：

main.js里配置

import microApp from "@micro-zoe/micro-app";
/** microApp 启动 */
microApp.start({
  'disable-memory-router': true, // 关闭虚拟路由系统
  'disable-patch-request': true, // 关闭对子应用请求的拦截
})

.env.development /  .env.production 里配置子应用端口号，有几个配几个

VUE_APP_URL_chirdren1 = http://localhost:40001/ #子应用1

router.js配置

 // 配置项目需要单独开启的页面，不带基座里的导航侧边栏等内容走这里
  {
    path: '/sub/chirdren1',
    component: () => import('@/layout/components/appMain/chirdren1'),
    hidden: true
  },

 // 带基座导航侧边栏等内容的页面走这里
 {
   path: '/chirdren1',
   component: () => import('@/layout/components/appMain/chirdren1'),
   name: 'drg',
   meta: {
      title: 'DRG智能管理系统'
   },
   hidden: true
 },


// 防止连续点击多次路由报错
let routerPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(err => err)
}
export default new Router({
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRoutes
})

放router.beforeEach的js配置

import { MODULE_LIST } from '@/utils/constant'

// 匹配系统路径 确定当前系统

let module = MODULE_LIST.find(item=>item.baseUrl == to.path)
if (module) {
  Cookies.set("menuId", module.id);
}

这里是说，项目有很多，但是这里我们要给他设定默认的id，让基座知道往哪跳转

constant.js

export const MODULE_LIST = [{
    id: '1',
    name: '子系统1',
    baseUrl: '/chirdren1'
  },
  {
    id: '3',
    name: '子系统2',
    baseUrl: '/chirdren2'
  },
]

建一个去往子应用文件的地方

appMain文件夹

chirdren1.vue

<template>
  <div>
    <micro-app name="chirdren1" :url="appUrl" baseroute="/chirdren1"></micro-app>
  </div>
</template>

<script>
import microApp from '@micro-zoe/micro-app'
export default {
  data() {
    return {
      module: null,
      appUrl: process.env.VUE_APP_URL_chirdren1
    }
  },
  created() {
  },
  mounted() {
    microApp.addDataListener('chirdren1', (data) => {
      console.log('来自子应用chirdren1的数据', data)
      if(data.type === 'logout') {
        this.$store.dispatch('LogOut').then(() => {
          // Cookies.remove("menuId");
          this.$router.push({path: '/login'})
        })
      }
    })
  },
  methods: {
    goUrl(url) {
      console.log('===url', url)
      microApp.router.push({name: 'chirdren1', path: '/chirdren1#'+url})
    }
  }
}
</script>

name名字很重要，要对应起来，要不进入子应用的时候会有问题

再就是基座里，你切换其他系统的时候需要配置的地方，点击切换系统的方法

changeValue(val) {
        // 筛选菜单路由表
        this.$store
          .dispatch("GenerateRoutes", {
            val,
          })
          .then((accessRoutes) => {
            // 根据roles权限生成可访问的路由表
            this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
            // 这里去匹配上几个文件配置的系统id，然后进行跳转操作
            let currentModule = MODULE_LIST.find(item=>item.id == val)
            location.href = currentModule.baseUrl;
          });
      }
    },

上面操作完成，恭喜你微前端已经掌握了90%

因为子应用的配置相比较而言少的离谱咯

下面是子应用的配置

vue.config.js
配置上子应用的端口号40001


router.js

除去正常路由配置好后加上下面的

// 防止连续点击多次路由报错
let routerPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(err => err)
}
export default new Router({
  mode: 'hash', // 去掉url中的#
  scrollBehavior: () => ({
    y: 0
  }),
  routes: constantRoutes
})

router.beforeEach里配上

import { MODULEID } from '@/utils/constant'

里面是这个
export const MODULEID = 1

/** 模块名称 */
export const MODULE_NAMES = {
  '1': '/chirdren',
}


router.beforeEach里配上

let val = MODULEID
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then((infoRes) => {
          const chars = infoRes.modules.split(",");
          // 用户所属系统模块集合
          Cookies.set("userModules", chars);
          isRelogin.show = false
          store
            .dispatch("GenerateRoutes", {
              val,
            }).then(accessRoutes => {
              // 根据roles权限生成可访问的路由表
              router.addRoutes(accessRoutes) // 动态添加可访问路由表
              next({
                ...to,
                replace: true
              }) // hack方法 确保addRoutes已完成
            })
        }).catch(err => {
          store.dispatch('LogOut').then(() => {
            Cookies.remove("menuId");
            // Message.error(err)
            next({
              path: '/'
            })
          })
        })

配完这些恭喜你，成功跳转到子应用了，需要基座下发或者子应用回传数据，官网api就有就不写了