Nuxt.js中使用Vue-Octicon报错unexpected identifier求助

哦，这个问题我碰到过！你出错的核心原因是用错了Vue组件的全局注册方式——Vue.use()是用来注册Vue插件的，但vue-octicon的Octicon.vue是一个普通的Vue单文件组件，不是符合插件规范的对象，所以才会抛出unexpected identifier错误。

修复步骤 #

1. 修改插件注册文件 #

打开/plugins/octicon.js，把错误的Vue.use()调用改成全局组件注册的Vue.component()，同时注意按需导入图标时的精准性：

import Vue from 'vue'
import Octicon from 'vue-octicon/components/Octicon.vue'
// 按需导入你实际使用的repo-forked图标（必须和模板中的name属性对应）
import 'vue-octicon/icons/repo-forked'
// 如果你不介意包体积，想导入全部图标，就替换成下面这句：
// import 'vue-octicon/icons'

// 全局注册组件，和模板中使用的<octicon>标签名对应
Vue.component('octicon', Octicon)

2. 关键错误原因解释 #

Vue.use()的设计目的是注册带有install方法的Vue插件（比如Bootstrap-Vue这种完整插件），但Octicon.vue只是一个普通的组件选项对象，并没有install方法。当你调用Vue.use(octicon)时，Vue会尝试执行这个组件对象，自然会触发语法错误。而Vue.component()才是Vue官方提供的、用于全局注册单个组件的正确API。

3. 验证修复 #

修改完成后重启Nuxt应用，再访问使用了<octicon>的组件，错误应该会消失，repo-forked图标也能正常渲染。

内容的提问来源于stack exchange，提问作者Andreas