我们日常开发中经常会遇到生产菜单下线了，但是项目中代码没有被删除的情况，这些菜单在打包和编译阶段都是存在的，影响打包体积和编辑速度。写这个工具的目的为了减少代码冗余
使用技术：nodejs+axios
实现思路：
1、根据用户权限获取到所有的菜单权限信息
接口请求使用axios库，axios支持服务端请求
const axios = require('axios')
const fs = require('fs')
const path = require('path')
// 保存下线的菜单
let offlineMenus = []
//指定读取src/views路径
const dir = path.join(__dirname,"../src/views")
const dirSRC = path.join(__dirname,"../src")
const headers = {
Cookie:
'cookieValue'
}
async function getMenus() {
const res = await axios.get('xxx/getUserInfo', {
headers
})
if (res.data.status) {
// 遍历菜单将菜单按照层级遍历并且将结果写入一个Menu.json文件中
const menus = res.data.result.menus
// 将菜单层级打平，做转换
const onlineMenus = await handleMenus(menus)
// 获取src/views/index.vue的文件下的所有菜单
handleIndexVueFiles(dir,onlineMenus)
// fs.writeFileSync(path.join(__dirname, 'menu1.json'), menus, 'utf8');
} else {
console.log('获取菜单失败')
}
}
// 入口调用getMenus方法即可
getMenus()
获取到的菜单结果如下
[图片上传失败...(image-16d683-1723124816146)]
2、将菜单层级打平，转换为扁平的数组格式
这里使用递归+闭包将菜单名字和暂存的菜单列表进行传递
// 处理菜单
function handleMenus(menus, menuName = '', menuList = []) {
return new Promise((resolve, reject) => {
// 遍历menus菜单，按照menu_name和menu_url进行输出
menus.map((item, index) => {
// 一级菜单，直接push
if (item.children.length === 0 && item.menu_url) {
menuList.push({
menuName: item.parent_id === 0 ? item.menu_name : menuName + '-' + item.menu_name,
menuUrl: item.menu_url,
menuCode: item.code,
menuPremission: item.access_permissions
})
}
// 处理子集菜单
if (item.children.length) {
// 获取子集菜单
let subMenu = item.children
handleMenus(subMenu, item.parent_id === 0 ? item.menu_name : menuName + '-' + item.menu_name, menuList)
}
})
// 写入json文件
const json = JSON.stringify(menuList, null, 2)
// 输出了所有在线的菜单。怎么根据在线的菜单和views中的文件
fs.writeFileSync(path.join(__dirname, 'test.json'), json, 'utf8')
resolve(menuList)
})
}
转换后的菜单结构如下：
[图片上传失败...(image-ce63ad-1723124816146)]
3、读取views下的所有以index.vue的文件
使用node的文件系统，读取所有的index.vue文件，读取到之后和从权限系统中的menus做对比，如果两者路径相同说明该文件有用，否则判断是没用的文件
下面几个处理路径relativePath的地方是因为权限系统和读取到的目录有差异，所以做了转换，方便查找的时候可以完全匹配
// 获取views下所有index文件的路径，然后在menulist中查找，查找不到的说明是已下线的，再生成一个offline.json文件
function handleIndexVueFiles(directory,menus){
fs.readdirSync(directory).forEach(file => {
const fullPath = path.join(directory, file);
const stat = fs.lstatSync(fullPath);
if (stat.isDirectory()) {
handleIndexVueFiles(fullPath, menus); // 递归遍历子目录
} else if (path.basename(file).toLowerCase() === 'index.vue') {
// 将fullpath转换为相对路径
const relativePath = path.relative(dir, fullPath);
// 将路径中的\替换为/
const relativePath2 = relativePath.replace(/\\/g, '/');
// 将路径中.vue去掉
const relativePath3 = `views/${relativePath2.replace('.vue', '')}`;
let fIndex = menus.findIndex((item)=> `${relativePath3}` === item.menuUrl && item.menuUrl !== 'TAB')
if(fIndex === -1){
console.log('不相同菜单',fIndex,relativePath3);
let target = menus[fIndex]
offlineMenus.push({menuUrl: relativePath3})
// 写入json文件
const json = JSON.stringify(offlineMenus, null, 2)
// 输出了所有在线的菜单。怎么根据在线的菜单和views中的文件
fs.writeFileSync(path.join(__dirname, 'offline.json'), json, 'utf8')
}else{
console.log('相同菜单',fIndex,relativePath3);
}
// console.log('发现Index.vue 文件:', relativePath3);
}
});
}
最终拿到的所有index.vue的文件
[图片上传失败...(image-88705-1723124816146)]
