时间戳

首页 > 解决方案 > Font Awesome 未在 Vue 构建的 Web 组件中呈现

vue.js - Font Awesome 未在 Vue 构建的 Web 组件中呈现

问题描述

我有一个 Vue 组件，我正在使用以下构建命令将其编译为 Web 组件：

npm run build -- --target wc --name projName src\components\server-config.vue

我在我的 Vue 文件中遗漏了一些东西，因为 Web 组件不会呈现字体真棒图标。这是我“npm run serve”时的样子

正确外观示例

这是我将它编译成 web 组件并在 demo.html 中打开后的样子： 在此处输入图像描述

我看到几个问题：

如何正确地将字体包含到我的组件中？这是我当前的 vue 文件：

<template>
    <div style="text-align: center; font-family: sans-serif">
      <v-text-field label="Password" class="mx-4" v-model="password" :type="showPass ? 'text' : 'password'" @click:append="showPass = !showPass" :append-icon="showPass ? 'far fa-eye' : 'far fa-eye-slash'"></v-text-field>
      <v-checkbox class="mx-4" v-model="useIntegratedAuthentication" label="Use Integrated Authentication" ></v-checkbox>
      <div>
        <i class="far fa-eye"></i>
        <span>My eye here</span>
    </div>
    </div>
</template>

<style scoped>
  @import '../../node_modules/vuetify/dist/vuetify.min.css';
  @import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900';
  @import 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css';
</style>

<script src="https://kit.fontawesome.com/XXXXXXXXX.js" crossorigin="anonymous"></script>
<script lang="ts">
import { VTextField, VCheckbox } from 'vuetify/lib';
import vuetify from '@/plugins/vuetify';
import Vue from 'vue';

export default Vue.extend({
  vuetify,
  components: {
    VTextField, VCheckbox
  },
  data() {
    return {
      showPass: false,
      password: '',
      useIntegratedAuthentication: false
    };
  }
})

</script>

标签： vue.jsbuildfont-awesomeweb-component

解决方案

想出了一个可行的解决方案。安装组件后，您需要在脚本标签中加载字体：

mounted() {
  const css = `
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.eot);
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.woff) format("woff"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.ttf) format("truetype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-brands-400.svg#fontawesome) format("svg")
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.eot);
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.woff) format("woff"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.ttf) format("truetype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-regular-400.svg#fontawesome) format("svg")
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.eot);
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.woff) format("woff"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.ttf) format("truetype"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/webfonts/fa-solid-900.svg#fontawesome) format("svg")
}`;

  // if our style is already injected we do not need to inject it a second time
  if (!document.getElementById('myCustomInjectedStyle')) {
    const head = document.head || document.getElementsByTagName('head')[0];
    const style = document.createElement('style');
    style.id = 'myCustomInjectedStyle';
    style.type = 'text/css';
    style.innerText = css;
    head.appendChild(style);
  }
},

我从来没有让材料设计适用于复选框，所以我更新了我的 vuetify.ts 文件以始终使用字体真棒。

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

Vue.use(Vuetify)

export default new Vuetify({
    icons: {
        iconfont: 'fa'
    }
})

推荐阅读