【若依 RuoYi】纯前端开发指南脱离后端启动解决左侧菜单不显示/白屏问题附 Apifox Mock 对接[toc] 【若依 RuoYi】纯前端开发指南脱离后端启动解决左侧菜单不显示/白屏问题附 Apifox Mock 对接前言在前端日常开发中我们经常需要接手别人未完成的 Vue 项目俗称“半路接盘”。这类项目通常基于若依RuoYi或类似的后台管理框架。最大的痛点在于若依的左侧菜单和按钮权限是依赖后端接口动态返回的。如果后端 Java 服务没有启动前端项目即使跑起来了也会面临以下问题左侧菜单空空如也甚至页面白屏。页面内的“新增/删除”按钮因为没权限被隐藏。所有接口请求报 500 或 Network Error。本文将手把手教你如何“魔改”若依前端彻底脱离后端配合 Apifox Mock 实现纯前端独立开发核心解决思路既然后端没启动拿不到动态菜单我们的核心思路就是“静态化 数据劫持”路由静态化把需要开发的业务页面直接写死在前端的constantRoutes静态路由中。绕过登录校验修改路由守卫伪造超管 Token 和权限无条件放行。劫持侧边栏组件在菜单渲染组件中强行把本地静态路由喂给el-menu绕过 Vuex 的空数据。实战步骤第一步路由静态化改造 src/router/index.js打开src/router/index.js找到constantRoutes数组。把你要开发的业务模块直接追加到这个数组的末尾。注意避坑必须包含meta: { title: 菜单名, icon: 图标 }否则菜单不显示。绝对不能有hidden: true。component指向的.vue文件必须在硬盘上真实存在否则会报Module not found编译失败// src/router/index.jsexportconstconstantRoutes[// ... 原有的登录、404、首页等保持不变 ...// 【新增】直接写死业务菜单无需后端返回{path:/system,component:Layout,redirect:/system/user,meta:{title:系统管理,icon:system},// 父级必须有 title 和 iconchildren:[{path:user,component:()import(/views/system/user/index),// 确保文件存在name:User,meta:{title:用户管理,icon:user},}]}];第二步绕过登录与权限改造 src/permission.js打开src/permission.js找到router.beforeEach。我们将原本复杂的 Token 校验和动态路由加载逻辑全部注释掉改为强制伪造超管状态并直接放行。// src/permission.jsimportrouterfrom./routerimportstorefrom./storeimportNProgressfromnprogressimportnprogress/nprogress.cssimport{setToken}from/utils/authNProgress.configure({showSpinner:false})router.beforeEach((to,from,next){NProgress.start()// 【开发期专属】强制伪造超级管理员状态if(!store.getters.roles||store.getters.roles.length0){setToken(dev-mock-admin-token)store.commit(SET_TOKEN,dev-mock-admin-token)store.commit(SET_NAME,admin)store.commit(SET_ROLES,[admin])// 若依框架的超级权限通配符让页面内所有 v-hasPermi 的按钮都显示出来store.commit(SET_PERMISSIONS,[*:*:*])}// 无条件放行所有路由next()})router.afterEach((){NProgress.done()})第三步终极杀招 - 劫持侧边栏组件核心做完前两步你会发现菜单还是不出来。为什么因为左侧菜单组件Sidebar是去 Vuex 里读取sidebarRouters的而我们跳过了后端接口Vuex 里根本没数据解决办法直接在组件内部“劫持”数据源。打开src/layout/components/Sidebar/index.vue完整替换其script部分template!-- 保持原有的 template 结构不变 --div:class[sidebar-theme-wrapper, {has-logo:showLogo}, settings.sideTheme]...!-- ... --el-menu...!-- 注意这里循环的是 sidebarRouters --sidebar-itemv-for(route, index) in sidebarRouters:keyroute.path index:itemroute:base-pathroute.path//el-menu/div/templatescriptimport{mapGetters,mapState}fromvuex;importLogofrom./Logo;importSidebarItemfrom./SidebarItem;importvariablesfrom/assets/styles/variables.scss;import{constantRoutes}from/router;// 【关键 1】引入本地静态路由exportdefault{components:{SidebarItem,Logo},computed:{...mapState([settings]),...mapGetters([sidebar]),// 【关键 2】移除原本的 sidebarRouters 映射// 【关键 3】强行劫持并覆盖 sidebarRouters直接返回本地数据sidebarRouters(){// 过滤掉 hidden: true 的路由如登录、404等只保留要显示的菜单returnconstantRoutes.filter(route!route.hidden);},activeMenu(){constroutethis.$route;const{meta,path}route;if(meta.activeMenu)returnmeta.activeMenu;returnpath;},showLogo(){returnthis.$store.state.settings.sidebarLogo;},variables(){returnvariables;},isCollapse(){return!this.sidebar.opened;}}}/script原理说明在 Vue 中computed里自定义的同名函数sidebarRouters()会覆盖掉mapGetters里的映射。这样组件就会直接读取我们本地写死的路由彻底摆脱对 Vuex 的依赖第四步对接 Apifox Mock解决接口 500 报错菜单出来了但页面里的数据请求还是会报 500因为后端没起。我们需要让前端去 Apifox 要假数据。在 Apifox 中开启 Mock 服务复制 Mock 地址如https://mock.apifox.cn/m1/xxxx/。打开前端项目根目录的.env.development文件。修改 Base API 指向 Mock 地址# .env.development # 将原本的 /dev-api 改为你的 Apifox Mock 地址 VUE_APP_BASE_API https://mock.apifox.cn/m1/你的项目ID/重启前端项目npm run dev。此时所有接口请求都会打到 Apifox完美返回 Mock 数据新手避坑指南必读Node 版本警告如果你看到npm warn EBADENGINE Unsupported engine说明你的 Node 版本太高如 v24。若依 Vue2 版本最高支持到 Node 16/17。请务必使用nvm将 Node 降级到16.20.0并删除node_modules重新npm install否则极易引发底层 C 编译报错。文件路径必须真实存在在constantRoutes中配置的component: () import(/views/xxx)对应的.vue文件必须真实存在。哪怕里面只有一行templatediv测试/div/template也必须建文件否则 Webpack 会直接罢工报错。提交代码前的终极警告本文提供的所有修改permission.js、Sidebar/index.vue、.env.development仅适用于本地纯前端开发当你准备将业务代码提交到 Git 时千万不要使用git add .请使用git add src/views/你的业务页面.vue精确提交务必将上述“魔改”文件留在本地以免污染线上环境总结通过“路由静态化 权限伪造 组件数据劫持”的三连招我们成功将若依前端改造成了一个不依赖后端的“单机版”。配合 Apifox Mock你可以完全按照自己的节奏进行 UI 开发和逻辑编写再也不用看后端接口的脸色了希望这篇文章能帮到正在接手半成品项目的你少走弯路提高效率如果觉得有用欢迎点赞收藏支持一下。