使用 webpack dev-server (vue-cli-service)

问题描述

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

现在我有一个组件 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 中？

解决方法

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

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

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

这些结果是这行代码：

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

pdfjs vue.js webpack-dev-server