Webpack Vue CLI+；Font Awesome 5生产版本-无图标（Font Awesome\5免费）

我有一个工作的Vue CLI项目，开发版本工作得很好-我可以看到我所有的字体很棒的图标，没有任何问题

但是，当我运行prod Build时，我的所有图标都将替换为包含字符代码的正方形（在：before伪标记中呈现的样式）

在深入研究已编译的CSS时，我发现，在prod构建中，字体Awesome SCS是根据以下内容编写的

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

.far {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
}

进入这个

@font-face{font-family:Font Awesome\ 5 Free;font-style:normal;font-weight:900;src:url(/fonts/fa-solid-900.eot);src:url(/fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(/fonts/fa-solid-900.woff2) format("woff2"),url(/fonts/fa-solid-900.woff) format("woff"),url(/fonts/fa-solid-900.ttf) format("truetype"),url(/fonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:Font Awesome\ 5 Free}.fa,.fas{font-weight:900}

编辑：有一段时间我以为是这样的，但这是一个骗局

font-family:'font-Awesome 5 Free'=>font-Awesome\5 Free

字体家族的名字现在是不稳定的-不是世界末日，而是- 哎呀

编辑：真正的问题是

更严重的是路径匹配不起作用

给出的路径是“/fonts/”，但在我的应用程序中，我的根目录是“myapp/things/”，它似乎忽略了这一点。如果我将完整路径放入$fa font path变量中，则应用程序将不会编译。如果我将其设置为当前状态

@import "~@fortawesome/fontawesome-free/scss/fontawesome";

$fa-font-path: "~/fonts";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

…然后它只在dev服务器上工作。errrrrrr

---

我不知道如何解决这个问题-有人能告诉我为什么会发生这种情况以及我能做些什么吗？

我最终解决了这个问题。首先，我删除了在供应商索引中设置的变量。scss

@import "~@fortawesome/fontawesome-free/scss/fontawesome";

//$fa-font-path: "~/fonts"; SET IN vue.config.js
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

…并将变量设置为vue.config.js中的数据

css: {
    modules: false,
    sourceMap: process.env.NODE_ENV !== 'production',
    loaderOptions: {
        sass: {
            data: `
                $fa-font-path: ${process.env.NODE_ENV !== 'production' ? '"~/fonts"' : '"/myapp/things/fonts"'};
                @import "@/scss/base/index.scss";
                @import "@/scss/helpers/index.scss";
            `
        }
    }
},

---

对我来说有点讨厌，但它可以工作。

当你运行一个生产构建时，所有的东西都被缩小并从静态加载，你是否检查过你的路径是否有错误？@lix路径并不像我预期的那样。一旦构建，“字体”目录路径就不是“/fonts“it's”/myapp/thing/fonts”（例如）