Vue 应用程序的 Electron 构建不显示材质图标

Question

我们的 Vue 应用程序使用

vuetify

作为其组件库，默认情况下使用材料设计图标。要让图标正常工作唯一需要做的事情是导入我们在

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 插件 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"',
      },
    },
  },
};

知道是什么原因造成的吗？或者我们如何进一步调试问题？

Answer 1

“vuetify icon not showing”帖子建议安装

@mdi/font

，你已经完成了。

但是，这是在

devDependencies

中声明的，在为生产而构建时可以忽略，如解释here.

所以我会首先测试是否在依赖项中声明相同的

@mdi/font

包而不是改变“生产构建”最终结果。

Answer 2

我在使用 Angular + Electron 时遇到了类似的问题。您可以做的是在启用 devTools 的情况下构建您的应用程序，这样您就可以看到控制台错误。就我而言，Jquery 在引导程序后被导入，破坏了我的非开发环境。

Answer 3

您目前正在使用

"@mdi/font": "^7.1.96"

.

根据docs你应该使用

v6

（仔细查看cdn链接）。

可能不太可能，但你应该尝试降级到最新的 6.x (

6.9.96

)。

但是，我怀疑这是你的错误的原因。我能够使用您的配置使用以下版本的

@mdi/font

6.9.96

和

7.1.96

构建电子应用程序，并且在 Windows 和 Mac 上都可以正常显示图标。

Another possible cause might be the

v-icon

syntax you're using (因为你没有显示它)。我使用（和工作）的语法是：

<v-col cols="12">
  <v-icon x-large color="red darken-2">mdi-vuetify</v-icon>
  <v-icon large color="purple">mdi-email</v-icon>
  <v-icon color="orange darken-2">mdi-arrow-up-bold-box-outline</v-icon>
</v-col>

我建议您提供指向存储库或 codesandbox 的链接，当在本地机器上构建时，它们会重现错误。如果这样做，请将其最小化（删除所有业务逻辑，只保留带有图标的组件）。