Vue 3中如何拆分main.ts内的FontAwesome相关代码？

实现方法很简单，分两步操作： #

1. 创建独立的FontAwesome封装文件 #

在项目src目录下新建fontAwesomeLibrary.ts文件，把所有FontAwesome相关的导入、图标注册逻辑都迁移到这里：

// 引入Vue应用类型，让TS类型检查更严谨
import type { App } from 'vue'
// 导入FontAwesome核心库
import { library } from '@fortawesome/fontawesome-svg-core'
// 导入Vue适配的FontAwesome组件
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// 导入需要的图标——以后新增图标只需要修改这里
import { faHammer, faTruckPickup, faSortDown, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'

// 将图标添加到FontAwesome库中
library.add(faHammer, faTruckPickup, faSortDown, faMagnifyingGlass)

// 定义对外暴露的注册函数，接收Vue应用实例作为参数
export function addFontAwesomeIcons(app: App) {
  // 全局注册FontAwesome图标组件
  app.component('font-awesome-icon', FontAwesomeIcon)
}

2. 简化main.ts代码 #

删除main.ts中原有的FontAwesome相关代码，替换为导入并调用上述封装好的函数：

import { createApp } from 'vue'
import App from './App.vue'
// 导入注册函数（路径根据你的实际文件位置调整）
import { addFontAwesomeIcons } from './fontAwesomeLibrary'

const app = createApp(App)

// 一行代码完成FontAwesome的所有注册操作
addFontAwesomeIcons(app)

app.mount('#app')

后续维护说明 #

之后需要新增图标时，只需要在fontAwesomeLibrary.ts里导入新图标，再将其加入library.add()的参数列表即可，完全不需要改动main.ts，彻底保持入口文件的简洁性。

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