Nuxt.js 如何全局引入并正确使用自定义NPM包csv-parse

你之前的操作从一开始就搞错了普通JS库和Vue插件的使用逻辑：

• csv-parse是通用的纯JS解析工具，根本不属于Vue插件范畴，它本身没有实现Vue插件要求的install方法。
• 直接写Vue.use(CsvParse)的操作不会产生任何实际的挂载动作，既没有把库暴露成全局变量，也没有把库挂到Vue原型链上，所以你之前尝试的四种调用方式全部失败：要么触发未定义的ReferenceError，要么拿到undefined的空值。

1. 改写plugins目录下的插件文件，用Nuxt内置的挂载能力实现全局暴露，不要硬套Vue.use逻辑
   打开plugins/csv-parse.js，把原来的代码替换成下面的内容：

   // plugins/csv-parse.js
   import CsvParse from 'csv-parse'
   
   // Nuxt插件固定写法，通过inject方法做全局挂载
   export default ({ inject }) => {
     inject('csvParse', CsvParse)
   }
   

   Nuxt的inject是专门用来做全局方法、工具挂载的内置能力，挂载完成后，所有组件实例都能通过this.$[挂载名]访问到对应的内容。

2. 你在nuxt.config.js里写的插件配置完全符合客户端使用的要求，不需要做任何修改，直接保留即可：

   // nuxt.config.js 中的plugins配置
   plugins: [
     { src: "~/plugins/csv-parse", mode: "client" }
   ]
   

   这个配置会让csv-parse只在浏览器端加载，不会进入服务端渲染流程，是针对仅客户端使用的依赖的正确配置方式。

3. 组件内的正确调用方式
   回到@/components/Hospitals/Crud.vue的方法里，直接和inject的命名保持一致，通过this访问即可：

   // @/components/Hospitals/Crud.vue
   export default {
     methods: {
       parseFileData() {
         // 直接访问this.$csvParse，就是之前挂载的csv-parse库
         console.log('parser:', this.$csvParse)
   
         // 实际csv解析的调用示例
         this.$csvParse('表头1,表头2\n值1,值2', {
           columns: true
         }, (err, parsedResult) => {
           if (err) throw err
           console.log('csv解析结果：', parsedResult)
         })
       }
     }
   }
   

• 对这类轻量纯工具库来说，全局挂载不是必须的：你完全可以在需要用的组件里直接import CsvParse from 'csv-parse'单独引入，只要别在服务端运行的生命周期（比如asyncData、服务端中间件）里调用它，连插件文件都不用写，实现更简单。
• 注意挂载的命名对应关系：inject('xxx', 方法/对象)之后，组件里访问的是this.$xxx，不要随便修改大小写、加多余的前缀后缀，否则还是会拿到undefined。
• 不要无差别给所有第三方库套Vue.use()：只有明确标注是Vue插件的库（比如UI组件库、路由库这类）才需要走这个流程，纯工具库根本不需要适配Vue的插件规范。

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