Vue2项目引入mdi-icons后出现@fontawesome无法解析报错如何解决

1. 安装适配Vue2的FontAwesome依赖 #

执行以下命令安装对应版本依赖：

npm install @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome@2.0.10 --save

vue-fontawesome 2.x为Vue2适配版本，禁止安装3.x及以上版本，否则会出现兼容报错

2. 修正项目入口文件引入配置 #

找到项目的main.js入口文件，按以下示例调整引入逻辑：

import Vue from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// 按需引入所需免费图标，不要全量引入@fortawesome/all避免体积过大和路径报错
import { faCoffee, faUser } from '@fortawesome/free-solid-svg-icons'
// 如需使用品牌图标可引入free-brands-svg-icons下的对应图标

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

new Vue({
  render: h => h(App)
}).$mount('#app')

3. 校验App.vue图标调用写法 #

确认组件调用写法与注册名称匹配，示例如下：

<template>
  <div id="app">
    <font-awesome-icon icon="coffee" />
    <font-awesome-icon icon="user" />
  </div>
</template>

4. 清理缓存重启项目 #

如果修改后仍报错，执行以下操作清理缓存重新构建：

• 删除项目根目录下的node_modules文件夹、package-lock.json或yarn.lock文件
• 执行npm install重新安装所有依赖
• 执行npm run serve重启开发服务

如果问题仍未解决，检查vue.config.js中的路径别名配置，确认没有对@fortawesome相关路径做错误重定向。

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