nuxt中的Oct-Vue：意外标识符

Question

我想使用Octicon中的图标，我的项目是用nuxt.js编写的，所以我决定将this Octicon组件用于Vue.js。 我创建了一个名为octicon.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 build选项中，同样在nuxt config.js中：

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

您可能还希望将<octicon>标签包裹在<no-ssr>标签中。