若依vue3 前端微应用改造

一、前言

这篇是记录解决若依vue3版本微应用改造，但是自己之前也试过vue-element-admin框架的微应用改造，前端主流的微应用技术不怎么挑框架的，而且注入方式大同小异。但自己之前尝试的时候踩过很多坑，但是确实比较麻烦，需要耐心研究，但成功的话会提升很多，而且也为之后的开发打好了基础，因此记录下可供大家参考。

二、基座框架

若依vue3版本源码地址：RuoYi-Cloud: 🎉 基于Spring Boot、Spring Cloud & Alibaba的分布式微服务架构权限管理系统，同时提供了 Vue3 的版本

特别注意：

• 若依框架拉下来需要开启后端服务器才可以跑，我是成功跑了以后，再把请求的数据暂时在前端先写成固定的，这样方便调试。请先完成拉下代码成功跑起来这一步再继续看下面哈。
• 另外安装依赖尽量不要用镜像，yarn 或者 npm install都可以，至于为什么可以看官网。

那么如何改成固定的数据呢？这里有几处的数据需要改一下，请看下面：

1，改造登录方法

由于登录是调用store里面login的方法，这里用到了promise像后端请求，所以需要注掉一些内容；

 token可以复制浏览器网络请求回来的token值：

setToken("eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjJiMjUxZjA3LTc3NjUtNDQ1NC04MWM2LWQ3MDFkYmNmZTNlZiJ9.WtrolkMlQL5-8ZH78niAuNmJo5vsJzu2VJUBT4sopInf4-DP9JMsy_vkVN9pvu4fekZiEuEk1vR3jvU4dki-Nw")

注释掉getInfo方法中以下的代码 

 注释掉logout方法中以下的代码：

 加上//todo下面的内容：

 this.token = ''
            this.roles = []
            this.permissions = []
            removeToken()
            resolve()
        })

2，改造store/modules/permission.js里面的路由信息

因为原来路由是向后端请求来的，所以我们需要把返回的值直接写死，如下注释掉promise请求的内容。

 路由信息如下，直接让res等于它即可；

 var res = {
          msg: "操作成功",
          code: 200,
          data: [
            // 首页
            {
              name: "index",
              path: "/index",
              hidden: false,
              redirect: "noRedirect",
              component: "Layout",
              alwaysShow: true,
              meta: {
                title: "首页",
                icon: "fall",
                noCache: false,
                link: null,
              },
              //系统管理
            {
              name: "System",
              path: "/system",
              hidden: false,
              redirect: "noRedirect",
              component: "Layout",
              alwaysShow: true,
              meta: {
                title: "系统管理",
                icon: "fall",
                noCache: false,
                link: null,
              },
              children: [
                {
                  name: "User",
                  path: "user",
                  hidden: false,
                  component: "system/user/index",
                  meta: {
                    title: "用户管理",
                    icon: "user",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Role",
                  path: "role",
                  hidden: false,
                  component: "system/role/index",
                  meta: {
                    title: "角色管理",
                    icon: "peoples",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Menu",
                  path: "menu",
                  hidden: false,
                  component: "system/menu/index",
                  meta: {
                    title: "菜单管理",
                    icon: "tree-table",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Dept",
                  path: "dept",
                  hidden: false,
                  component: "system/dept/index",
                  meta: {
                    title: "部门管理",
                    icon: "tree",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Post",
                  path: "post",
                  hidden: false,
                  component: "system/post/index",
                  meta: {
                    title: "岗位管理",
                    icon: "post",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Dict",
                  path: "dict",
                  hidden: false,
                  component: "system/dict/index",
                  meta: {
                    title: "字典管理",
                    icon: "dict",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Config",
                  path: "config",
                  hidden: false,
                  component: "system/config/index",
                  meta: {
                    title: "参数设置",
                    icon: "edit",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Notice",
                  path: "notice",
                  hidden: false,
                  component: "system/notice/index",
                  meta: {
                    title: "通知公告",
                    icon: "message",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Log",
                  path: "log",
                  hidden: false,
                  redirect: "noRedirect",
                  component: "ParentView",
                  alwaysShow: true,
                  meta: {
                    title: "日志管理",
                    icon: "log",
                    noCache: false,
                    link: null,
                  },
                  children: [
                    {
                      name: "Operlog",
                      path: "operlog",
                      hidden: false,
                      component: "monitor/operlog/index",
                      meta: {
                        title: "操作日志",
                        icon: "form",
                        noCache: false,
                        link: null,
                      },
                    },
                    {
                      name: "Logininfor",
                      path: "logininfor",
                      hidden: false,
                      component: "monitor/logininfor/index",
                      meta: {
                        title: "登录日志",
                        icon: "logininfor",
                        noCache: false,
                        link: null,
                      },
                    },
                  ],
                },
              ],
            },
            //系统监控
            {
              name: "Monitor",
              path: "/monitor",
              hidden: false,
              redirect: "noRedirect",
              component: "Layout",
              alwaysShow: true,
              meta: {
                title: "系统监控",
                icon: "fall",
                noCache: false,
                link: null,
              },
              children: [
                {
                  name: "Online",
                  path: "online",
                  hidden: false,
                  component: "monitor/online/index",
                  meta: {
                    title: "在线用户",
                    icon: "online",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Job",
                  path: "job",
                  hidden: false,
                  component: "monitor/job/index",
                  meta: {
                    title: "定时任务",
                    icon: "job",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Druid",
                  path: "druid",
                  hidden: false,
                  component: "monitor/druid/index",
                  meta: {
                    title: "数据监控",
                    icon: "druid",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Server",
                  path: "server",
                  hidden: false,
                  component: "monitor/server/index",
                  meta: {
                    title: "服务监控",
                    icon: "server",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Cache",
                  path: "cache",
                  hidden: false,
                  component: "monitor/cache/index",
                  meta: {
                    title: "缓存监控",
                    icon: "redis",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "CacheList",
                  path: "cacheList",
                  hidden: false,
                  component: "monitor/cache/list",
                  meta: {
                    title: "缓存列表",
                    icon: "redis-list",
                    noCache: false,
                    link: null,
                  },
                },
              ],
            },
            //系统工具
            {
              name: "Tool",
              path: "/tool",
              hidden: false,
              redirect: "noRedirect",
              component: "Layout",
              alwaysShow: true,
              meta: {
                title: "系统工具",
                icon: "fall",
                noCache: false,
                link: null,
              },
              children: [
                {
                  name: "Build",
                  path: "build",
                  hidden: false,
                  component: "tool/build/index",
                  meta: {
                    title: "表单构建",
                    icon: "build",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Gen",
                  path: "gen",
                  hidden: false,
                  component: "tool/gen/index",
                  meta: {
                    title: "代码生成",
                    icon: "code",
                    noCache: false,
                    link: null,
                  },
                },
                {
                  name: "Swagger",
                  path: "swagger",
                  hidden: false,
                  component: "tool/swagger/index",
                  meta: {
                    title: "系统接口",
                    icon: "swagger",
                    noCache: false,
                    link: null,
                  },
                },
              ],
            },
            //若依官网
            {
              name: "Http://ruoyi.vip",
              path: "http://ruoyi.vip",
              hidden: false,
              component: "Layout",
              meta: {
                title: "若依官网",
                icon: "guide",
                noCache: false,
                link: "http://ruoyi.vip",
              },
            },
          ],
        };

 3，注释掉登录页的验证码的相关代码

大概步骤如上，可以试试能不能本地启动了，启动后相关页面的表格数据请求不到是正常的。

完成以上的准备工作可以开始微应用注入了。

三、主流微前端框架

1，阿里Qiankun：

官方文档：介绍 - qiankunhttps://qiankun.umijs.org/zh/guideqiankun我踩的坑比较多，所以本篇不涉及，后面单独更新哈；

2，京东MicroApp：

官方文档：MicroAppDescriptionhttps://cangdu.org/micro-app/docs.html#/zh-cn/start（1）主应用

特别注意：主应用路由如果是hash模式，子应用只能是hash模式，主应用如果是history模式，子应用可以是history或者hash模式。

 history: createWebHistory(process.env.BASE_URL)

• 步骤一：安装依赖

安装依赖：npm i @micro-zoe/micro-app --save 或 yarn add micro-zoe/micro-app --save

• 步骤二：入口文件引入

// 放在顶部

import microApp from'@micro-zoe/micro-app'

microApp.start()

• 步骤三：分配个路由给子应用

在store/modules/permission.js的res里面添加一个子应用的路由

            //子应用
            {
              name: "micro",
              path: "/micro-app",
              hidden: false,
              redirect: "noRedirect",
              component: "Layout",
              alwaysShow: true,
              meta: {
                title: "子应用",
                icon: "fall",
                noCache: false,
                link: null,
              },
              children:[
                {
                  name: "micro1",
                  path: "home",
                  hidden: false,
                  component: "micro/micro1/index",
                  meta: {
                    title: "子应用1",
                    icon: "user",
                    noCache: true,
                    link: null,
                  },
                },
                {
                  name:"micro2",
                  path:"about",
                  hidden:false,
                  component:"micro/micro1/index",
                  meta:{
                    title:"子应用2",
                    icon: "user",
                    noCache: true,
                    link: null,
                  }
                }
              ]
            },

• 步骤四：创建子应用挂载的页面

views文件夹里面新建micro/micro1/index.vue页面

<template>
  <div class="miro-son1">
    <micro-app
      name="micro1" //分配给子应用的children的name
      url="http://localhost:8080/" //子应用跑起来的地址
      baseRoute="/micro-app" //分配子应用的path
      keep-alive //缓存，一定要有
    ></micro-app>
  </div>
</template>
<script>
export default {
  name: "",
  setup() {
    return {};
  },
};
function onBeforeshow(){
  console.log('即将重新渲染，初始化时不执行')
}
</script>
<style scoped lang="scss">
</style>

这个新建的页面不需要自己去挂载app-main里面，不用多此一举的。

（2）子应用

我自己是直接用脚手架创建了vue3的子项目

• 步骤一：src文件夹下新建public_path.js文件

// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
if (window.__MICRO_APP_ENVIRONMENT__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}

• 步骤二：main.js引入这个文件，并导出三个方法

import './public_path' // 顶部顶部

// -------------------分割线-umd模式------------------ //
export async function mount(props) {
  // app.createApp(App)
  app.mount(props?.container?.querySelector("#app") || "#app");
  console.log("微应用vue2渲染了 -- 来自umd-mount");
}
//卸载应用
export async function unmount() {
  app.destroy();
  app.$el.innerHTML = "";
  app = null;
  console.log("微应用vue2卸载了 -- 来自umd-unmount");
}
export async function bootstrap() {}
// 微前端环境下，注册mount和unmount方法
if (window.__MICRO_APP_ENVIRONMENT__) {
  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount };
} else {
  // 非微前端环境直接渲染
  mount();
}

• 步骤三： 监听keep-alive状态

// 监听keep-alive模式下的应用状态
window.addEventListener('appstate-change', function (e) {
  if (e.detail.appState === 'afterhidden') {
    console.log('已卸载')
  } else if (e.detail.appState === 'beforeshow') {
    // console.log(routes);
    // console.log(e);
    console.log('即将重新渲染')
    const baseRoute = window.__MICRO_APP_BASE_ROUTE__ ;
    const p = window.location.pathname;
      const paramsBeginIndex = p.indexOf("?");
      const path = p.substring(baseRoute.length, paramsBeginIndex === -1 ? undefined : paramsBeginIndex);
      // const query = convertHrefSearch(window.location.search);
      console.log(baseRoute);
      console.log(path);
      //todo
      if (routes) {
        if (path) {
          // if (path === "home") {
          //   window.$router.replace({ path: "/", query });
          // }
          var completePath = baseRoute+path;
          console.log(completePath);
          routes.replace({ path:completePath });
        }
      } else console.warn("[MicroAppSetup]: 没有发现window.$router路由对象");
  } else if (e.detail.appState === 'aftershow') {
    console.log('已经重新渲染')
  }
})

• 步骤四：子应用配置跨域

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8080,                             // 修改端口
    headers: {
      'Access-Control-Allow-Origin': '*',   // 设置跨域
    },
  }
})

好了，差不多可以跑了，耐心的调试会成功的，当然关于如何父子应用通信这篇就不说了，可以参考官方文档，后面自己尝试了后再更新。

另外，如果真的诚心想啃下微前端这块硬骨头的话，大家可以加一下官网的微信群，我就是keep-alive的问题出现了问题，求教大佬，慢慢研究出来的。加油！