如何在Vue/Express/hypernova-vue应用中集成FontAwesome？

方案一：局部注册FontAwesomeIcon（推荐，无全局污染） #

因为hypernova-vue没有显式的createApp调用，且全局注册容易和jQuery主应用产生冲突导致崩溃，最安全的方式是在需要使用图标的组件内部局部注册：

1. 在你的Vue组件文件（比如MyComponent.vue）中，导入需要的FontAwesome资源并注册组件：

<template>
  <div>
    <!-- 使用图标 -->
    <font-awesome-icon :icon="['fas', 'user-secret']" />
  </div>
</template>

<script setup>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'

// 将需要的图标添加到FontAwesome库
library.add(faUserSecret)
</script>

<script>
// 局部注册图标组件
export default {
  components: {
    FontAwesomeIcon
  }
}
</script>

如果用<script setup>语法，也可以简化为直接导入使用：

<script setup>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'

library.add(faUserSecret)
</script>

<template>
  <font-awesome-icon :icon="['fas', 'user-secret']" />
</template>

这种方式只会在当前组件内生效，完全隔离了Vue组件的依赖，不会污染全局环境，从根源避免和jQuery主应用的冲突。

方案二：全局注册（适合多组件复用图标） #

如果需要在多个组件中复用FontAwesome，不想每次都局部注册，可以修改hypernova-vue的客户端渲染逻辑，在它内部创建Vue实例时全局注册组件：

修改你的hypernova客户端JS代码：

import { renderVue } from '[private fork of the main project]';
import MyComponent from './components/MyComponent.vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

// 先添加图标到FontAwesome库
library.add(faUserSecret)

// 通过扩展组件的生命周期钩子，在hypernova创建Vue实例时注册全局组件
renderVue('My/Component', {
  extends: MyComponent,
  beforeCreate() {
    this.$app.component('font-awesome-icon', FontAwesomeIcon)
  }
});

如果你的私有fork版本的renderVue支持传入额外的应用配置项，也可以直接传入组件注册配置：

// 假设renderVue允许第三个参数作为应用配置
renderVue('My/Component', MyComponent, {
  appOptions: {
    components: {
      FontAwesomeIcon
    }
  }
});

主应用崩溃的原因 #

通常是因为FontAwesome的全局注册逻辑会污染全局DOM或window对象，和jQuery主应用的脚本、样式产生冲突。局部注册的方式完全隔离了Vue组件的依赖，能彻底避免这类问题。

内容的提问来源于stack exchange，提问作者Stickel