iconfont.cn站点的字体图标下载到本地，采用Font class的方式调用（如：<span class="icon iconfont icon-24gl-printer">），在开发预览环境中调用正常；可是打包后不显示字体图标。
element-ui也遇到同样的问题。
经过打包后开启的控制台可以看到引入字体文件的路径如下图红框所示(app://fonts/xxx.ttf)
打包后我直接打开的是免安装的软件）由此可见问题的原因很明确了：引用地址错误（正确地址为：app://./font/xxx.ttf）。
解决方案为
在vue.config.js中设置 customFileProtocol字段：
pluginOptions: {
electronBuilder: {
customFileProtocol: "./"
}
}
如果地址已经正确，还是不显示的话，那么问题可能与Electron的安全策略有关。Electron应用运行时会执行沙盒策略，可能会限制某些资源的加载。以下是一些可能的解决方案：
打开Electron的Web安全设置：
在Electron中，你可以使用以下代码打开Web安全设置，允许加载本地资源文件：
const { app, BrowserWindow } = require('electron')
app.commandLine.appendSwitch('disable-web-security')
app.on('ready', () => {
const mainWindow = new BrowserWindow({ width: 800, height: 600 })
// ...
})
请注意，这会禁用Electron的Web安全策略，因此在生产环境中谨慎使用。
尝试使用webFrame来设置CSP策略：
使用webFrame模块可以设置Content Security Policy（CSP）策略，以允许加载本地资源文件。例如
const { app, BrowserWindow, webFrame } = require('electron')
app.on('ready', () => {
const mainWindow = new BrowserWindow({ width: 800, height: 600 })
webFrame.registerURLSchemeAsSecure('file')
// ...
})
这将允许加载本地文件。
如果控制台还报GET app://.//fonts/iconfont.ttf net::ERR_FAILED这个错误提示表明浏览器无法加载 app://.//fonts/iconfont.ttf这个资源文件。
你可以尝试以下方法来解决这个问题：
使用 file:// 协议加载本地资源：将资源路径修改为使用 file:// 协议来加载本地资源文件。例如，将 app://.//fonts/iconfont.ttf 修改为 file://${__dirname}/fonts/iconfont.ttf 。
const { BrowserWindow } = require('electron');
const path = require('path');
const mainWindow = new BrowserWindow();
mainWindow.loadURL(`file://${path.join(__dirname, 'index.html')}`);
