Vite+Vue3+Electron项目导入@mdi/font图标遇显示异常求助

这种问题的核心原因是字体文件未被正确打包到Electron应用中，导致浏览器无法加载对应字体资源，最终 fallback 显示为同一个默认图标。以下是针对性的解决步骤：

1. 修正导入路径（避免相对路径歧义） #

放弃使用./node_modules/@mdi/font/...这类硬编码相对路径，直接通过包名导入更可靠：

• 在main.ts中：

  import '@mdi/font/css/materialdesignicons.css'
  

• 在main.scss中：

  @import '@mdi/font/scss/materialdesignicons';
  

2. 配置打包工具，确保字体文件被打包 #

根据你使用的打包工具（Vite/Webpack），添加字体资源的处理规则：

若使用Vite #

在vite.config.ts中添加assetsInclude，将字体文件纳入打包范围：

export default defineConfig({
  // 其他原有配置
  assetsInclude: ['**/*.woff', '**/*.woff2', '**/*.ttf'],
  build: {
    outDir: 'dist', // 确保与Electron打包输出目录一致
    assetsDir: 'assets' // 可选，指定资源输出子目录
  }
})

若使用Webpack #

在webpack.config.js的module.rules中添加字体处理规则：

module.exports = {
  // 其他原有配置
  module: {
    rules: [
      {
        test: /\.(woff|woff2|ttf)$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext]' // 指定字体输出路径
        }
      }
    ]
  }
}

3. 验证打包结果 #

执行打包命令后，检查输出目录（比如dist）：

• 确认存在fonts文件夹，且包含materialdesignicons-webfont.woff2等字体文件
• 启动Electron应用，打开开发者工具的Network面板，检查字体文件是否加载成功（无404错误）

4. 清除缓存后重新打包 #

旧缓存可能导致资源加载异常，执行以下操作后重试：

• 删除工具缓存目录（如Vite的node_modules/.cache）
• 清除Electron应用的缓存（可通过开发者工具的Application面板操作）
• 重新执行npm run build和Electron启动命令

额外注意事项 #

• 检查package.json，确保只安装了一个版本的@mdi/font，避免版本冲突
• 若使用SCSS导入，确认项目的SCSS预处理器已正确配置，能解析@mdi/font的SCSS变量和混合宏

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