若依vue3 前端微应用改造(若依vue教程)

若依vue3 前端微应用改造 一、前言

推荐整理分享若依vue3 前端微应用改造(若依vue教程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue ruoyi,前端vue后端node,若依vue教程,vue微前端实现,vue微前端架构图,若依vue教程,vue微前端架构图,若依vue教程,内容如对您有帮助，希望把文章链接给更多的朋友！

这篇是记录解决若依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的问题出现了问题，求教大佬，慢慢研究出来的。加油！