如何在生产构建的 Vue 项目中使 fontawesome 工作？

Question

我正在使用 Vue、typescript、vuetify 和来自 fontawesome5 的图标构建一个小项目。但是我遇到了一个我无法克服的奇怪挑战。在开发模式下，所有图标都显示得很好，字体很棒，但是当我为生产构建时，图标显示为方框。到目前为止，我的所有组件、自定义 vuetify 主题、后端 api，在我的构建中一切都按预期工作，但图标不是。我还注意到，在产品构建期间，未包含 fontawesome 字体，这解释了问题。我确实尝试在 index.html 中将直接 link 设置为 fontawesome cdn，但这也行得通。

我的设置很简单。项目初始化为

vue create .
vue add vuetify

到目前为止，这就是我所拥有的tried/made肯定是：

import '@fortawesome/fontawesome-free/css/all.css';
import vuetify from './plugins/vuetify';

因此正在导入 css。我尝试绕过这个 imoort 语句，但这并没有解决问题。

Vuetify 初始化

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#3577F6',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#5543BD',
        success: '#00695c',
        warning: '#F6BC41'
      },
      dark: {
        primary: '#3577F6',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#5543BD',
        success: '#00695c',
        warning: '#F6BC41'
      }
    },
  },
  icons: {
    iconfont: 'fa',
  },
});

我尝试将 css 导入移至此处，但行不通。

我的package.json是

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && npm run docs",
    "dev": "vue-cli-service serve",
    "docs": "./node_modules/.bin/redoc-cli bundle ./docs/swagger.yml --output ./dist/docs.html --options.hideDownloadButton"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.13.1",
    "axios": "^0.19.2",
    "lodash": "^4.17.15",
    "roboto-fontface": "*",
    "store2": "^2.11.2",
    "typeface-open-sans": "0.0.75",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-clipboard2": "^0.3.1",
    "vue-matomo": "^3.13.5-0",
    "vue-notification": "^1.3.20",
    "vue-router": "^3.3.4",
    "vuetify": "^2.3.1",
    "vuex": "^3.1.3"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.155",
    "@vue/cli-plugin-router": "^4.4.4",
    "@vue/cli-plugin-typescript": "^4.4.4",
    "@vue/cli-plugin-vuex": "^4.4.4",
    "@vue/cli-service": "^4.4.4",
    "redoc-cli": "^0.9.8",
    "sass": "^1.26.8",
    "sass-loader": "^8.0.0",
    "typescript": "^3.9.5",
    "vue-cli-plugin-vuetify": "~2.0.6",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.5.0"
  }
}

有人提到 css-loader 与 webpack 一起是必需的，所以我确实安装了 css 加载程序，但没有解决它。

因为我使用的是标准的 vue cli（版本@vue/cli 4.4.1），所以我没有看到 webpack 配置文件。

开发模式：

产品服务构建文件：

我该如何解决这个问题？

Answer 1

问题可能是...

未定义 $fa-font-path，无法找到字体。

解决方案

使用以下内容创建（并在您的项目中引用）一个 scss 文件（如 styles.scss）

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-pro/css/all.css';

这应该包含在 webpack 中

或者如果您想要特定的字体包...

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';

或者您可以使用 <style> 块

<style lang="scss">
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-pro/css/all.css';
</style>

如何在生产构建的 Vue 项目中使 fontawesome 工作？

How can I make fontawesome work in a Vue project in production builds?

font-awesome

vue.js

vuejs2

vuetify.js

问题可能是...

解决方案