如何在Vue.js应用中导入npm模块？导入pdf-lib提示模块找不到如何解决

核心问题原因 #

报错由两个常见错误导致：

1. 导入语句的包名书写错误，pdf-lib包没有@前缀，你写的@pdf-lib属于不存在的包
2. pdf-lib没有默认导出配置，不能用import _ from 'xxx'的语法直接引入根对象

分步解决方法 #

• 第一步：修正组件内的导入语句
  按需引入单个模块写法：

  import { PDFDocument, rgb } from 'pdf-lib'
  

  全量引入所有能力写法：

  import * as pdfLib from 'pdf-lib'
  

• 第二步：确认依赖安装正常
  如果修正导入语句后仍然报错，说明依赖没有成功写入本地node_modules目录：
  1. 关闭本地运行的项目，删除项目根目录下的node_modules文件夹和package-lock.json文件
  2. 重新执行安装命令：npm install --save pdf-lib
  3. 安装完成后重启项目即可正常加载

修正后的组件示例代码 #

// 全量导入示例
import * as pdfLib from 'pdf-lib'

export default {
  data() {
    return {
      // 业务数据定义
    }
  },
  methods: {
    async generatePdf() {
      // 调用pdf-lib能力创建PDF
      const pdfDoc = await pdfLib.PDFDocument.create()
      const page = pdfDoc.addPage([550, 750])
      page.drawText('Hello World!', {
        x: 50,
        y: 700,
        size: 30,
        color: pdfLib.rgb(0, 0.53, 0.71),
      })
      const pdfBytes = await pdfDoc.save()
      // 后续保存/下载逻辑
    }
  }
}

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