【Electron】解决Electron使用阿里iconfont不生效问题（react+vite）

写bug的可宋2026-01-17 8:08

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

问题描述

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

javascript 复制代码

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:// 协议下会解析错误。

解决方案

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

javascript 复制代码

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

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

注意事项：

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

javascript 复制代码

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

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

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

javascript 复制代码

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