JeecgBoot项目中离线模式下图标加载问题的解决方案

问题背景

在JeecgBoot 3.7.0版本中，开发者在本地VSCode启动模式下发现了一个关于图标加载的问题。当项目运行在离线环境（特别是内网部署环境）时，系统会尝试从远程服务器api.iconify.design加载部分图标资源，导致这些图标无法正常显示。

问题现象分析

通过观察发现，系统对不同图标的处理方式存在差异：

1. 部分内置图标（如mdi:chevron-down）能够直接从本地加载
2. 其他图标（如mdi:chevron-double-down）则会尝试从远程服务器获取
3. 系统会向api.iconify.design/ant-design.json等地址发起多个请求

这种不一致的行为在内网部署环境下会造成图标显示问题，影响用户体验。

技术原理

JeecgBoot前端采用了Iconify图标库作为图标解决方案。Iconify提供了两种图标加载方式：

1. 在线模式：通过CDN动态加载所需图标
2. 离线模式：将图标资源预先打包到项目中

默认配置下，系统会优先尝试从在线CDN加载图标，当在线加载失败时才会回退到本地资源。这就是为什么部分常用图标能正常显示，而其他图标会触发远程请求的原因。

解决方案

要实现完全的离线图标支持，需要进行以下配置调整：

1. 图标本地化生成：

   • 使用JeecgBoot提供的图标生成工具
   • 将项目所需的图标集合预先下载到本地
   • 配置图标加载策略优先使用本地资源

2. 配置修改：

   • 在前端配置文件中指定图标资源的本地路径
   • 禁用图标的在线加载功能
   • 确保所有图标集合都包含在本地资源中

3. 构建优化：

   • 在项目构建阶段将图标资源打包
   • 配置Webpack等构建工具正确处理图标资源

实施步骤

1. 识别项目中实际使用的所有图标
2. 使用图标生成工具下载对应的图标集合
3. 将生成的图标资源放置在项目指定目录
4. 修改前端配置以启用离线模式
5. 测试验证所有图标在离线环境下的显示情况

注意事项

1. 图标本地化会增加项目体积，建议只包含实际使用的图标
2. 定期更新本地图标库以获取最新图标
3. 在不同环境下测试图标显示效果
4. 对于自定义图标，需要单独处理

通过以上措施，可以确保JeecgBoot项目在完全离线的内网环境中也能正常显示所有图标，提升系统的稳定性和可用性。