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

【问题标题】：import custom worker into component vuejs with webpack dev-server (vue-cli-service)使用 webpack dev-server (vue-cli-service) 将自定义 worker 导入组件 vuejs
【发布时间】：2021-05-01 21:19:51
【问题描述】：

在 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.js webpack-dev-server pdfjs

【解决方案1】：

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

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

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

这些代码行的结果：

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

【讨论】：