无法使用 Vue2 渲染 FontAwesome 组件

Question

我一直在关注 FontAwesome to Vue 官方文档，但没有用。

我的

package.json

"dependencies": {
  "@fortawesome/fontawesome-svg-core": "^1.2.36",
  "@fortawesome/free-solid-svg-icons": "^5.15.4",
  "@fortawesome/vue-fontawesome": "^2.0.10",
}

这是我的

main.js

import Vue from 'vue';
import App from './App.vue';

import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faVolumeUp } from '@fortawesome/free-solid-svg-icons'

library.add(faVolumeUp)
Vue.component('font-awesome-icon', FontAwesomeIcon)

new Vue({
    el: '#main',
    render: h => h(App)
});

然后我尝试在我的

otherFile.vue

上使用它

<template>
  <footer>
    <div class="test">
      <font-awesome-icon :icon="['fas', 'volume-up']" />
    </div>
  </footer>
</template>

图标在页面上不可见，如果您尝试检查页面，组件

font-awesome-icon

不存在。所有你能看到的是：

<div data-v-21bcA9ba="" class="test">
  <!---->
</div>

为什么会发生这种情况以及如何解决它？