如何在 nuxt 应用程序中添加 vue-awesome 图标？

Question

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

现在安装包后我得到这个错误：

Unexpected identifier

从 github (nuxt repo 1, nuxt repo 2) 上的 nuxt repo 阅读后，我意识到在服务器上渲染它时会出现问题。 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']
}

Answer 1

Finanlly fixed it

nuxt.config.js

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

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

如何在 nuxt 应用程序中添加 vue-awesome 图标？

How to add vue-awesome icons in nuxt app?

font-awesome

vue.js

nuxt.js