如何在 nuxt 应用中添加 vue-awesome 图标？答案

【问题标题】：How to add vue-awesome icons in nuxt app?如何在 nuxt 应用中添加 vue-awesome 图标？
【发布时间】：2019-11-21 02:53:04
【问题描述】：

我想在我的universal NuxtJs 应用中添加font-awesome。所以我为此使用了vue-awesome 包。

现在安装包后出现此错误：

Unexpected identifier

从 github 上的 nuxt 存储库（nuxt repo 1、nuxt repo 2）阅读后，我意识到问题是在服务器上渲染时出现的。 SSR。

所以为了开发者的缘故，我将其静音：

在 nuxt.config.js 中

plugins: [{ src: '~plugins/vue-awesome', ssr: false },]

开发后不得不面对，卡在这个错误中：

"Unexpected token <"

这里是代码：

~/plugins/vue-awesome


import Vue from 'vue';
import Icon from 'vue-awesome/components/Icon.vue';
import './icons.js';

Vue.component('icon', Icon);

~/plugins/icons.js

import 'vue-awesome/icons/sign-in-alt'
import 'vue-awesome/icons/shopping-basket'
...

nuxt.config.js

module.exports = {
  build: {

    extend(config, ctx) {
        if (ctx.isClient) {
          config.module.rules.push({
            enforce: 'pre',
            test: /\.(js|vue)$/,
            loader: 'eslint-loader',
            exclude: /(node_modules)/
          })
        } else {
          config.externals = [ nodeExternals({
            whitelist: ['vue-awesome']
          })]
        }
    }
  },

  plugins: ['~plugins/vue-awesome.js']
}

【问题讨论】：

标签： vue.js font-awesome nuxt.js

【解决方案1】：

Finanlly fixed it

nuxt.config.js

  plugins: [
    '~plugins/vue-awesome',
  ],

  build: {
    transpile: [/vue-awesome/]
  },

【讨论】：

这救了我的@$$