vue.js - 使用 webpack dev-server (vue-cli-service) 将自定义 worker 导入组件 vuejs

Question

在 vuejs 应用程序中，我需要阅读 pdf 文件。我安装了 pdfjs-dist 库。但是这个库需要自定义一个工人的路径。这个工人是这个图书馆带来的。

现在我有一个组件 vuejs，其中包含该库的导入。在将承诺加载模块解析为 pdfjs-dist 后，我​​在该对象上设置了一个选项。

但是所有的测试都失败了

import("pdfjs-dist").then((pdfjsLib) => {
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  'node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  '/node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  './node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  './../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  './../../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  './../../../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  '../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  '../../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  '../../../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  './../../node_modules/pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry.js")
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  'cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc =  'pdfjs-dist/build/pdf.worker.js'
    // pdfjsLib.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.entry.js")

错误总是一样的，它说：

Uncaught (in promise) Error: Setting up fake worker failed: "Cannot read property 'WorkerMessageHandler' of undefined".

这是产生错误的路径还是 webpack 的加载任务路径？

如何将 pdfjs 的 worker 导入组件 vuejs 到 webpack dev-server env 中？

标签： vue.jswebpack-dev-serverpdfjs

Answer 1

我尝试了很多东西，但似乎 webpack 带来了许多其他技术概念，这些概念增加了理解和正确导入 worker 的难度。也许它在 webpack 配置文件中存在其他解决方案，但我没有找到。

目前找到的唯一解决方案是：

• 将工作模块 (pdfjs-dist) 复制到 node_modules 目录到应用程序的公共目录以尊重结构目录
• 直接声明此公共目录的路径并定位您的工作文件（pdf.worker.js）

这些导致此代码行：

pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs/build/pdf.worker.js'