Vue应用Electron打包后Material图标无法显示问题求助

我们的Vue应用采用Vuetify作为组件库，默认使用Material Design图标，已按官方要求在vuetify.js中导入@mdi/font/css/materialdesignicons.css：

import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
import colors from "vuetify/lib/util/colors";
import "@mdi/font/css/materialdesignicons.css";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.orange.lighten1,
      },
    },
  },
});

使用Vue CLI Plugin Electron Builder构建桌面应用时，执行vue-cli-service electron:serve开发模式下图标显示正常，但执行vue-cli-service electron:build打包生产版本后，在Windows或MacOS上运行时所有图标均显示为矩形。

package.json配置： #

{
  "name": "...",
  "version": "0.2.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service electron:serve",
    "build": "vue-cli-service electron:build",
    "lint": "vue-cli-service lint",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",
    "rebuild": "electron-rebuild -f -w serialport"
  },
  "dependencies": {
    "serialport": "^10.5.0",
    "vue": "^2.7.14",
    "vue-router": "^3.2.0",
    "vuetify": "^2.6.14",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@mdi/font": "^7.1.96",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-plugin-router": "^5.0.8",
    "@vue/cli-plugin-vuex": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/eslint-config-prettier": "^7.0.0",
    "electron": "^22.0.2",
    "electron-devtools-installer": "^3.2.0",
    "eslint": "^8.32.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.9.0",
    "plotly.js-dist": "2.18.2",
    "prettier": "^2.8.3",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
    "vue-cli-plugin-electron-builder": "^3.0.0-alpha.4",
    "vue-cli-plugin-vuetify": "^2.5.8",
    "vuetify-loader": "^1.9.2"
  },
  "overrides": {
    "vue-cli-plugin-electron-builder": {
      "electron-builder": "^23.1.0"
    }
  },
  "engines": {
    "node": ">=18"
  }
}

vue.config.js配置： #

const path = require("path");

module.exports = {
  lintOnSave: false,
  transpileDependencies: ["vuetify"],
  pluginOptions: {
    electronBuilder: {
      preload: "src/preload.js",
      externals: ["serialport"],
      outputDir: "builds",
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src/"),
      },
    },
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "~@/assets/style/_variables.scss"',
      },
    },
  },
};

可能的原因 #

• 字体文件未被正确打包：生产构建时webpack未将@mdi/font的字体资源（.woff2、.ttf等）纳入打包范围，导致应用运行时无法加载字体文件。
• 路径解析错误：Electron生产环境的文件路径结构与开发环境不同，CSS中引用的字体路径在打包后无法正确指向资源位置。
• 打包策略冲突：vuetify-loader的树摇功能可能误删了图标相关资源，或者vue-cli-plugin-electron-builder的配置阻止了字体资源的复制。
• 版本兼容性问题：@mdi/font、Vuetify或Electron的版本组合存在兼容性问题，导致字体加载逻辑失效。

调试与解决方法 #

• 检查打包后的资源目录：找到Electron打包后的应用包（Windows下可右键.exe选择"打开文件所在位置"，进入resources/app.asar.unpacked或类似路径），查看是否存在@mdi/font的字体文件（通常位于static/css/fonts或对应资源目录）。
• 启用生产模式调试工具：在打包后的应用中按F12打开开发者工具，切换到Network面板，刷新页面查看字体资源的加载状态，确认是否有404错误及请求路径是否正确。
• 强制webpack处理字体资源：在vue.config.js的configureWebpack中添加字体文件的loader规则，确保资源被正确复制：

  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'fonts/[name].[hash:7].[ext]'
          }
        }
      ]
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src/"),
      },
    },
  }
  

• 临时禁用树摇功能：暂时移除vuetify-loader或调整Vuetify配置，排除树摇导致的资源丢失问题。
• 替换字体导入方式：在public/index.html中通过<link>标签直接引入CDN版的Material Design Icons CSS，测试是否为本地字体加载问题：

  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.1.96/css/materialdesignicons.min.css" rel="stylesheet">
  

• 排查版本兼容性：尝试升级或降级@mdi/font、Vuetify或Electron的版本，验证是否为版本冲突导致的问题。

内容的提问来源于stack exchange，提问作者Stefan Bajić