NextJS静态导出+Electron项目中字体引入失败问题求助

我之前在做Next.js静态导出配合Electron的项目时，也碰到过几乎一模一样的字体加载问题，给你几个可行的解决方案，你可以挨个试试：

首先分析下问题根源 #

你设置了output: "export"做静态导出，同时用assetPrefix: "./"来适配Electron的本地文件环境，但Webpack在编译CSS中的url()路径时，会以当前CSS文件的编译上下文去解析相对路径，这就导致它找不到你写的./fonts/...对应的实际文件位置，所以抛出了找不到模块的错误。

方案一：改用基于Public目录的绝对路径（最省心） #

Next.js的public目录是专门放静态资源的，这里的文件可以直接用/开头的绝对路径引用，而且在静态导出时，配合你设置的assetPrefix: "./"，Next.js会自动把这些绝对路径转换成相对路径，完美适配Electron本地环境。

修改你的global.css中的字体定义：

@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/roboto-mono/RobotoMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: "Roboto Mono";
}

改完之后重新跑next build，应该就能正常编译了，Electron中也能正确加载字体。

方案二：手动配置Webpack规则，强制指定字体文件的输出路径 #

如果方案一没解决问题，你可以直接在next.config.ts中添加Webpack的自定义规则，明确告诉Webpack如何处理字体文件，确保它能正确找到并复制到输出目录：

修改你的next.config.ts：

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export",
  assetPrefix: "./",
  webpack: (config) => {
    // 给字体文件添加专门的处理规则
    config.module.rules.push({
      test: /\.(ttf|otf|eot|woff|woff2)$/,
      type: 'asset/resource',
      generator: {
        // 指定字体文件输出到out目录下的对应位置
        filename: 'fonts/roboto-mono/[name][ext]'
      }
    });
    return config;
  }
};

export default nextConfig;

配置完之后，CSS里的字体路径不管用绝对路径还是相对路径，Webpack都能正确解析并处理了。

方案三：检查基础的文件结构和拼写 #

有时候问题可能出在最基础的地方，你可以先确认：

• public/fonts/roboto-mono/RobotoMono-Regular.ttf这个文件确实存在，没有被误删或者放错位置
• 文件名的大小写完全正确（比如是不是写成了robotomono-regular.ttf？有些系统的文件系统是大小写敏感的）
• 字体文件本身没有损坏（可以试着直接在本地打开字体文件验证）

我当时是用方案一解决的问题，你先从最简单的开始试，应该能快速搞定。

内容来源于stack exchange