解决Electron使用阿里iconfont不生效问题

问题描述

Electron应用打包后，生产环境渲染层无法加载本地iconfont资源。

import { createFromIconfontCN } from '@ant-design/icons'
const IconFont = createFromIconfontCN({
  scriptUrl: '/iconfont/iconfont.js',
})

查看控制台，发现iconfont.js资源加载失败


这是由于页面加载 iconfont.js/iconfont.css 时，如果路径是绝对路径 /iconfont/iconfont.js 或相对 HTTP 地址，Electron 在本地 file:// 协议下会解析错误。

解决方案

1. 从 iconfont 下载项目的所有文件（JS/CSS/SVG 等）。
2. 把这些文件放到 electron-egg 项目的 前端静态目录（比如 app/web/public/iconfont/）。
   
3. 在前端代码引用相对路径，例如：

import { createFromIconfontCN } from '@ant-design/icons'
const IconFont = createFromIconfontCN({
  scriptUrl: './iconfont/iconfont.js',
})

此时再看控制台，加载成功

注意事项：

1. iconfont资源必须要放在public目录下，Vite 会让这个目录里的文件原样复制到打包的 dist，并且开发服务器也能直接访问。
2. 确保 Vite 基础路径正确

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './', // 或 '/app/'，根据部署路径来设置
})

3. 不能只放iconfont.js文件，css、woff等文件也要放在iconfont目录下，否则会有样式问题
4. 可以将路径写在环境变量中，方便开发环境调试，不用频繁下载压缩包

const IconFont = createFromIconfontCN({
  scriptUrl: import.meta.env.VITE_ICONFONT_URL,
})