使用webpack dev-server (vue-cli-service)将自定义工作者导入组件vuejs中。

Question

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

现在我有了一个组件vuejs，它包含这个库的一个导入。在将承诺加载模块解析到pdfjs之后，我在这个对象上设置了一个选项。

但是所有的测试都失败了

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的工作人员导入组件vuejs到webpack dev-server env？

Answer 1

我尝试了很多东西，但webpack似乎提出了许多其他技术概念，增加了难以理解和正确输入工人的概念。也许它存在webpack配置文件中的其他解决方案，但我没有找到。

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

将worker模块(Pdfjs)复制到应用程序的公共目录中，以便尊重结构directory

• declare路径，将其直接复制到此公共目录中，并以工作文件(pdf.worker.js)

为目标。

的结果是这个代码行：

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

​

​