Electron/React应用如何预加载字体？解决生产环境字体路径报错

云上老周

2026-8-28

问题根因

生产环境Electron基于file://协议加载本地index.html，路径开头的/代表磁盘根目录，会直接寻址到file:///c5c3959c04004102ea46.woff2这类磁盘根路径，和打包后存放在应用资源目录下的字体文件实际位置不匹配。开发模式由本地dev server托管静态资源，/对应服务根目录，所以可以正常加载。

修复步骤

1. 修正打包器公共路径配置

electron-forge搭配的前端打包器默认生成的资源路径是根绝对路径，要改成相对路径：

用Vite/Rspack的场景，在渲染进程配置文件里设置base: './'

// vite.renderer.config.ts / vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  base: './', // 核心配置，所有静态资源引用自动生成相对路径
  // 其余原有配置保持不变
})

用Webpack的场景，在输出配置里设置publicPath: './'

module.exports = {
  output: {
    publicPath: './',
    // 其余原有output配置保持不变
  }
}

2. 修正html内手动写死的资源路径

把html中preload字体路径开头的斜杠去掉，改成相对路径写法，不要用根路径：

<!DOCTYPE html>
<html lang="en" data-color-scheme="auto">
  <head>
    <link
      rel="preload"
      href="./c5c3959c04004102ea46.woff2"
      as="font"
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      href="./535bc89d4af715503b01.woff2"
      as="font"
      crossorigin="anonymous"
    />
    <meta charset="utf-8" />
    <title>Test app</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

不建议手动写死带哈希的静态资源文件名，配置完base: './'后让打包器自动注入资源引用即可，避免后续资源哈希变化需要手动修改路径。

3. 额外避坑点

如果渲染进程用了history模式路由，必须改成hash模式，file://协议不支持history模式的路径寻址，打包后会出现子路由404
配置修改完成后，先清空旧的构建产物缓存，再重新执行打包命令，避免旧缓存导致配置不生效

验证标准

打包完成后打开产物目录下的index.html，查看所有js、css、字体、图片资源的引用路径，全部为./开头的相对路径时，安装运行应用就不会再出现ERR_FILE_NOT_FOUND报错。

内容的提问来源于stack exchange，提问作者sunknudsen

Electron/React应用如何预加载字体？解决生产环境字体路径报错

1. 修正打包器公共路径配置 #

2. 修正html内手动写死的资源路径 #

3. 额外避坑点 #

1. 修正打包器公共路径配置

2. 修正html内手动写死的资源路径

3. 额外避坑点