潮州建设局网站门户网站建设公司案例

1.需求背景

项目中有部分功能需要vip权限才可以使用，所有部分筛选、按钮 等有vip的icon提示 如下图

此项目衍生出一个特殊版本，此版本无需登录且拥有最高权限，所以产品要求去除项目中的所有vip相关的提示。

2.解决思路

（1）首先想到的是找到对应组件把引用icon的节点隐藏  如下

此方法过于繁琐，项目中涉及到的页面有数十个，对与修改和验证的压力都很大，容易出现遗漏和错误。

（2）直接把引用的vip的icon删除，或者换成空白的图片。

所以准备在项目打包的时候增加脚本处理相关文件。

3.具体操作

（1）大概统计一下 项目中凡是涉及到vip显示的icon 命名中基本都带有 vip 字符

（2）新建三个空白图片 

（3）替换：递归src文件夹下的所有文件 匹配到文件名含有vip的图片，并根据图片类型 替换成 对应的blank文件（此处把源文件做了一次备份，在文件名后加了一个后缀）。代码如下所示

// 替换并备份 项目内的所有vip图片
const fs = require('fs');
const path = require('path');
// const { format } = require('date-fns'); // 用于格式化日期
const joinDir = (...dir) => path.join(__dirname, ...dir);
// 定义要搜索的目录
const searchDir = './'; // 当前目录
const replacementPath = joinDir('../blankImg/');
// 定义备份文件的后缀
const backupSuffix = `_bak`;// 定义要删除文件的扩展名
const fileExtensions = ['.png', '.jpg', '.svg'];// 定义替换文件的映射
const replacementFiles = {'.png': 'blank.png','.jpg': 'blank.jpg','.svg': 'blank.svg'
};// 递归查找并处理文件
function processDirectory(dir) {const files = fs.readdirSync(dir);files.forEach(file => {const fullPath = path.join(dir, file);const stat = fs.statSync(fullPath);if (stat.isDirectory() && fullPath.includes('src')) {// 如果是目录，则递归处理processDirectory(fullPath);} else if (stat.isFile()) {// 检查文件名是否包含 "vip" 且扩展名是否为 .png, .jpg, 或 .svgconst ext = path.extname(file).toLowerCase();if (file.toLowerCase().includes('vip') && fileExtensions.includes(ext) && !file.toLowerCase().includes(backupSuffix)) {// 生成备份文件名const backupExt = path.extname(file);const baseName = path.basename(file, backupExt);const backupFileName = `${baseName}${backupSuffix}${backupExt}`;const backupPath = path.join(dir, backupFileName);// 创建备份文件fs.copyFileSync(fullPath, backupPath);// 替换原文件let tempPath = path.join(replacementPath,replacementFiles[ext]);fs.copyFileSync(tempPath, fullPath);}}});
}let startTime  = new Date().getTime()
// 替换并备份
processDirectory(searchDir);
console.log('Done: 替换并备份 vip文件 耗时：', new Date().getTime() - startTime , 'ms')

（4）恢复源文件：打包完成之后把替换成空图片的文件恢复成源文件，直接用3里备份的文件替换就可以，代码如下

// 打包完成之后恢复vip图片
const fs = require('fs');
const path = require('path');
// const { format } = require('date-fns'); // 用于格式化日期// 定义要搜索的目录
const searchDir = './'; // 当前目录
// 定义备份文件的后缀
const backupSuffix = `_bak`;// 定义要删除文件的扩展名
const fileExtensions = ['.png', '.jpg', '.svg'];// 递归查找并删除符合条件的文件
function deleteFilesRecursively(dir) {const files = fs.readdirSync(dir);files.forEach(file => {const fullPath = path.join(dir, file);const stat = fs.statSync(fullPath);if (stat.isDirectory() && fullPath.includes('src')) {// 如果是目录，则递归处理deleteFilesRecursively(fullPath);} else if (stat.isFile()) {// 检查文件名和扩展名const ext = path.extname(file).toLowerCase();const baseNameOrigin = path.basename(file, ext);const baseName = path.basename(file, ext).toLowerCase();if (fileExtensions.includes(ext) && baseName.toLowerCase().includes('vip') && !baseName.includes(backupSuffix)) {// 删除文件fs.unlinkSync(fullPath);}if (fileExtensions.includes(ext) && baseName.toLowerCase().includes('vip') && baseName.includes(backupSuffix)) {// 去掉文件名中的 backupSuffixconst newName = baseNameOrigin.replace(backupSuffix, '').concat(ext);const newFullPath = path.join(dir, newName);// 重命名文件fs.renameSync(fullPath, newFullPath);}}});
}let startTime  = new Date().getTime()
// 删除blankVip文件 恢复vip文件
deleteFilesRecursively(searchDir);
console.log('Done: 恢复vip文件 耗时:', new Date().getTime() - startTime , 'ms')

（5）调用：在打包前替换文件，打包后恢复文件

4.总结

在打包之后会发现项目中引入的vip文件的逻辑并没变，只是每个vip文件都变成空白的了。

其实此处有一个问题就是vip的icon如果设置了尺寸的话，占位还是在的。