vue.js - Vue 应用程序的 Electron 版本不显示 Material 图标

Question

我们的 Vue 应用程序使用 vuetify 作为其组件库，默认情况下使用 Material 设计图标。唯一的事that needs to be done for the icons to work correctly是导入我们在 vuetify.js 文件中执行的 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 electro:serve 时，图标在开发模式下显示正常，但如果我们使用 vue-cli-service electro: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"',
      },
    },
  },
};

有什么想法可能导致这种情况吗？或者我们如何进一步调试问题？

Answer 1

"vuetify icon not showing" post建议安装@mdi/font，您已经完成了。

但是，这是在 devDependency 中声明的，在为生产构建时可以忽略它，如 explained here .

因此，我首先测试在依赖项中声明相同的 @mdi/font 包是否会更改“为生产而构建”的最终结果。