在开发uni-app应用时，有时候会遇到在内网环境下字体图标无法正常显示的问题。这个问题通常是由于网络限制导致的，因为默认情况下，uni-app中的字体图标是通过外部链接引用的，而内网环境中可能无法访问这些外部资源。为了解决这个问题，我们需要将字体图标本地化，以下是一步一步的操作指南：
我们要从uview官网下载图标集文件。uview UI 是一款基于uni-app的组件库，提供了丰富的图标选择。下载后，解压缩文件，找到其中的 `iconfont.ttf` 文件，将其重命名为 `uicon-iconfont.ttf`，然后将这个文件放到项目根目录下的 `static` 目录中。这样做的目的是将字体文件引入到项目内部，以便在内网环境下也能访问。
接下来，我们需要修改uview-ui组件库中引用字体的路径。打开项目中的 `node_modules/uview-ui/components/u-icon/u-icon.vue` 文件，这里会有一个引用外部字体的URL，通常是 `https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf`。我们将这个URL替换为指向我们刚刚放入 `static` 目录的本地字体文件路径，即 `@/static/uicon-iconfont.ttf`。这样，组件库在渲染图标时就会加载本地的字体文件。
为了让修改后的文件在后续的开发过程中得到持久化，我们需要使用 `patch-package` 工具来打补丁。`patch-package` 是一个用于管理依赖包修改的工具，可以方便地跟踪和应用这些修改。安装该工具的命令是 `npm i patch-package`。然后，在 `package.json` 的 `scripts` 字段中添加 `"postinstall": "patch-package"`，确保每次安装依赖后都会自动应用补丁。在终端中执行 `npx patch-package uview-ui` 生成补丁。如果一切顺利，你会看到一个名为 `patches` 的文件夹，其中包含了针对uview-ui的补丁文件，文件名格式为 `uview-ui+版本号.patch`。
为了确保在其他开发环境或生产环境中也能正确应用补丁，需要将 `uicon-iconfont.ttf` 文件以及生成的补丁文件一起上传到代码仓库。如果在生成补丁时遇到 `spawnSync git ENOENT` 错误，这意味着你的系统中没有配置Git的环境变量，需要先安装Git并设置相应的环境变量。
总结起来，解决uni-app在内网环境下字体图标显示问题的关键步骤包括：将字体文件本地化、修改组件库的字体引用路径、使用 `patch-package` 打补丁以及将修改和补丁文件同步到代码仓库。通过这些操作，可以确保字体图标在任何网络环境下都能正常显示，从而提高应用的可用性。
评论0