Vue CLI + Font Awesome 5 Production Build - 无图标（Font Awesome\ 5 免费）答案

【问题标题】：Vue CLI + Font Awesome 5 Production Build - No Icons (Font Awesome\ 5 Free)Vue CLI + Font Awesome 5 Production Build - 无图标（Font Awesome\ 5 免费）
【发布时间】：2019-06-12 04:31:02
【问题描述】：

我有一个可用的 Vue CLI 项目，并且开发版本运行良好 - 我可以毫无问题地看到我所有的 Font Awesome 图标。

但是，当我运行 prod 构建时，我的所有图标都被替换为包含字符代码的方块（在 :before 伪标签中呈现的样式。

在深入研究编译后的 CSS 时，我发现在 prod 构建中，Font Awesome SCSS 是从这个编译而来的......

@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";

...那么它只适用于开发服务器。呃呃呃呃。

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

【问题讨论】：

当您运行生产构建时，所有内容都被压缩并静态加载，您是否检查过您的路径格式是否错误？
@lix 路径不是我所期望的。它失败的地方是，一旦构建，“fonts”目录路径不是“/fonts”而是“/myapp/thing/fonts”（例如）

标签： webpack vuejs2 font-awesome vue-cli-3

【解决方案1】：

我最终解决了这个问题。首先，我删除了在供应商 index.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";
            `
        }
    }
},

对我的口味来说有点恶心，但它有效。

【讨论】：