在Nuxt项目中引入fontawesome

在nuxt中引入fontawesome的方法跟引入其他外部库基本一样，因为初次接触nuxt，所以引入fontawesome时，参考网上的各种vue fontaswesome的文章，一直无法显示，踩坑不少，最后才意识到我是要在nuxt里面引入啊。

记录下最后的解决方法，没准能给同我一般的nuxt小白节省点时间。

安装

Yarn:

// 套件
yarn add nuxt-fontawesome

// package，不收费
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

Npm:

// 套件
npm i nuxt-fontawesome

// package，不收费
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/free-regular-svg-icons
npm i @fortawesome/free-brands-svg-icons

备：Nuxt Font Awesome 中使用了官方提供的 vue-fontawesome。

配置

• 新建plugin

  在plugins目录下，新建文件：font-awesome.js，放入以下内容：

  import Vue from 'vue'
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
  
  Vue.component('font-awesome-icon', FontAwesomeIcon)
  Vue.config.productionTip = false
  

  这里，引入了FontAwesomeIcon，同时通过Vue.component，生成可供使用的组件，组件的标签为font-awesome-icon。Vue.config.productionTip设置为false，表示关闭生产模式下给出的提示。

• 配置nuxt.config.js

  在nuxt.config.js文件中，在plugins，module部分分别添加如下代码：

  plugins: [
   'xxxx',
    // 引入我们刚刚新增的文件font-awesome.js
   '~/plugins/font-awesome'
  ]
  
  .....
  
  modules: [
   'xxxxx',
    // 引入我们新增的套件nuxt-fontawesome
    'nuxt-fontawesome'
  ]
  
  ....
  /*
   ** FontAwesome module configuration 配置FontAwesome
   */
   fontawesome: {
     // See https://github.com/vaso2/nuxt-fontawesome
     // 这里设置了组建的标签为fa
     // 如果不设置，则默认为在font-awesome.js中，生成的：font-awesome-icon
     component: 'fa',
     imports: [
       {
         set: '@fortawesome/free-solid-svg-icons',
         icons: ['fas']
       },
       {
         set: '@fortawesome/free-regular-svg-icons',
         icons: ['far']
       },
       {
         set: '@fortawesome/free-brands-svg-icons',
         icons: ['fab']
       }
     ]
   },
  .......
  

  这里，把三个免费的package都添加进来了。如果需要添加收费的pro版本，则是这样：

   /*
    ** FontAwesome module configuration
    */
    fontawesome: {
      // See https://github.com/vaso2/nuxt-fontawesome
      component: 'fa',
      imports: [
        {
          set: '@fortawesome/pro-regular-svg-icons',
          icons: ['faAdjust']
        }
      ]
    }
  

  [当然，这里set的库，都是之前通过npm / yarn 已经安装过的 ，具体参考：Nuxt Font Awesome]

使用

设定完成，就可以使用了，以一个简单的fontawesome icon 为例：

<i class="fas fa-music"></i>

在vue页面中引用上述music的icon时，这样写：

### 如果设置中，额外设置了component: 'fa':
<fa :icon="['fas', 'music']" />

### 如果没有设置component
<font-awesome-icon :icon="['fas', 'music']" />

OK！

更多使用参考Nuxt Font Awesome。

参考

推荐： 【Nuxt教學】實作引用 Fontawesome 5 到Nuxt專案

Nuxt Font Awesome