无法在 vuetify 中使用材料设计图标答案

【问题标题】：Unable to use material design icons in vuetify无法在 vuetify 中使用材料设计图标
【发布时间】：2018-10-16 06:06:02
【问题描述】：

我使用 npm install material-design-icons-iconfont 安装图标 css，它在节点模块中可用。在我构建之后，以下 woff 文件在 dist 中可用

Material-design-icons.css

  /* For IE6-8 */
      src: local("Material Icons"), local("MaterialIcons-Regular"), 
      url("./fonts/MaterialIcons-Regular.woff2") format("woff2"), 
      url("./fonts/MaterialIcons-Regular.woff") format("woff"), 
      url("./fonts/MaterialIcons-Regular.ttf") format("truetype");

所有三个 woff 文件都显示 404。我在 dist 文件夹中验证，我可以在 static/fonts/.woff 中看到所有这些文件。在浏览器控制台中还有`localhost:8000/static/fonts/.woff。所有文件名和路径都正确，但在控制台中仍然看到 404 错误。

【问题讨论】：

显然这是一个参考问题 - 您是否尝试过省略 './' 之类的： url("fonts/MaterialIcons-Regular.woff2") format("woff2") ？
是的，我也试过了，但还是不行。

标签： javascript vue.js vuetify.js

【解决方案1】：

在 NPM 安装之后，为什么不按照 Vuetify 文档将其导入您的 main.js 或 app.js 文件中。

// main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css'
// Ensure you are using css-loader

Vue.use(Vuetify, {
  iconfont: 'md'
})

但最简单的方法就是包含 CDN 链接：

<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

【讨论】：

不要使用导入作为 CDN 链接。它会造成渲染阻塞资源的问题。

【解决方案2】：

你检查过你的 webpack 配置中有 css-loader 吗？

module: {
    loaders: [
     { test: /\.css$/, loader: "css-loader" }
  ]
}

【讨论】：

【解决方案3】：

有多个材质图标包飞来飞去。还有多种格式，SVG 等等。很容易混淆。假设你有一个标准的 vuetify 配置并且你的目标是有一个本地安装的字体，因为你不喜欢向你的 head 注入异物，那么以下应该可以工作：

消除外部库

首先编辑您的public/index.html 并注释掉@mdi 导入。这一行还为我们提供了 vuetify 期望的包的线索。

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

安装本地依赖项

然后在您的项目文件夹中，安装 @mdi / font 包。

yarn add @mdi/font

导入Vue

然后，最后我们需要把这个新下载的包放到我们的应用程序中。您可以在任何地方导入，但最好将 vuetify 相关内容保存在位于 plugins/vuetify.js 的 vuetify 配置文件中

import "@mdi/font/css/materialdesignicons.min.css";

让 Vuetify 了解一切

并确保将 material design 导出为 vuetify 项目的首选图标字体。

内部plugins/vuetify.js

export default new Vuetify({
    icons: {
        iconFont: "md",
    },
});

您可能需要重建您的项目。祝你有美好的一天。

P.S @ 指向您的 node_modules 文件夹。

【讨论】：