Quasar框架（Vue3）集成pdfjs-dist时的导入解析错误问题

我在Quasar（Vue3）项目中通过npm install pdfjs-dist安装了pdfjs-dist包，还写了自定义的PdfViewer.vue组件，代码是这样的：

import { pdfjsLib } from "pdfjs-dist";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

但运行quasar dev启动开发模式后，直接报错了，错误信息如下：

[plugin:vite:import-analysis] Failed to resolve import "pdfjs-dist/build/pdf.worker.entry" from "src\pages\PdfViewer.vue". Does the file exist?

D:/project/project-frontend/src/pages/PdfViewer.vue:7:28
1 |

import { pdfjsLib } from "pdfjs-dist";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";
^
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

错误截图：

我查看了项目node_modules里的pdfjs-dist结构，是这样的：

下面给你几个可行的解决思路，你可以挨个试试：

• 修改worker导入路径
  从你提供的目录结构来看，pdf.worker.js才是实际存在的文件，把导入语句改成下面这样应该就能解决：

import { pdfjsLib } from "pdfjs-dist";
// 直接导入实际存在的worker文件
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.js";

pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

• 改用CDN加载worker
  如果本地导入还是有问题，也可以直接用CDN地址作为worker源，这样就不用本地导入了，记得替换成你安装的pdfjs-dist对应的版本号：

import { pdfjsLib } from "pdfjs-dist";

// 示例用的是4.0.379版本，你要换成自己的版本
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.min.js";

• 配置Vite优化依赖
  有可能是Vite的依赖解析没处理好，你可以在项目的quasar.config.js里的Vite配置部分添加优化规则：

// quasar.config.js
module.exports = function (ctx) {
  return {
    // ...其他配置
    build: {
      vite: {
        optimizeDeps: {
          include: ['pdfjs-dist', 'pdfjs-dist/build/pdf.worker.js']
        }
      }
    }
  }
}

• 调整pdfjs-dist版本
  要是上面的方法都不管用，可能是版本兼容性问题，你可以试试安装指定版本的pdfjs-dist，比如：

npm install pdfjs-dist@4.0.379 --save

安装后再按照对应版本的官方文档调整导入方式。

备注：内容来源于stack exchange，提问作者Devin Yasas