vue.js - 如何在 nuxt 应用中添加 vue-awesome 图标？

Question

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

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

Unexpected identifier

从 github 上的 nuxt repo （nuxt repo 1，nuxt repo 2）阅读后，我意识到问题是在服务器上渲染时出现的。固态硬盘。

因此，为了开发，我将其静音：

在 nuxt.config.js

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

开发后，我不得不面对它，我陷入了这个错误：

“意外的令牌<”

这是代码：

~/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.jsfont-awesomenuxt.js

Answer 1

终于修好了

nuxt.config.js

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

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