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

Question

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

现在我有一个组件 vuejs，其中包含该库的导入。在将 promise 加载模块解析为 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 中？

Answer 1

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

目前找到的唯一解决方案是这个 :

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

这行代码的结果 :

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

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

import custom worker into component vuejs with webpack dev-server (vue-cli-service)

pdf.js

vue.js

webpack-dev-server