nuxt中的Oction-vue：意外标识符答案

【问题标题】：Oction-vue in nuxt: unexpected identifiernuxt中的Oction-vue：意外标识符
【发布时间】：2019-08-09 11:25:35
【问题描述】：

我想使用 Octicon 的图标，我的项目是用 nuxt.js 编写的，所以我决定为 Vue.js 使用 this Octicon 组件。我创建了一个名为 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"
    ],

我的浏览器显示：

我的错误在哪里？

【问题讨论】：

标签： vue.js nuxt.js octicons

【解决方案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> 标记中。

【讨论】：