vue.js - nuxt中的Oction-vue：意外标识符

Question

我想使用 Octicon 的图标，我的项目是用 nuxt.js 编写的，所以我决定将这个Octicon 组件用于 Vue.js。我创建了一个名为 octacon.js 的文件并将其添加到 /plugins 并在 nuxt.config.js 中注册它。当我启动我的应用程序时，我收到消息“意外的标识符”。

/plugins/octicion.js：

import Vue from 'vue'
import octicon from 'vue-octicon/components/Octicon.vue'

// Pick one way betweem the 2 following ways

// only import the icons you use to reduce bundle size
import 'vue-octicon/icons/repo'

// or import all icons if you don't care about bundle size
import 'vue-octicon/icons'

Vue.use(octicon);

在MyComponent.vue我使用它喜欢

<template>
   <div>
      <octicon name="repo-forked" label="Forked Repository"></octicon>
   </div>
</template>

nuxt.config.js好像

   plugins: [
        "@/plugins/bootstrap-vue",
        "@/plugins/octicon.js"
    ],

我的浏览器显示：

我的错误在哪里？

Answer 1

您可能需要做两件事。该插件仅在客户端需要，因此您应该在 nuxt.config.js 中指定：

plugins: [
    "@/plugins/bootstrap-vue",
    { src: '~/plugins/octicon.js', mode: 'client' }
  ]

其次，您可能需要将其添加到 transpile 构建选项中，也在 nuxt config.js 中：

build: {
    transpile: ['octicon.js']
  }

您可能还想将标签包装在<octicon>标签中<no-ssr>。