Vue/Quasar Vite构建的PDF查看器库生产环境PDF.js导入失败

生产环境出现错误：

Setting up fake worker failed: Failed to fetch dynamically imported module

本地正常但生产环境出问题，核心原因是Vite构建库时，对动态导入的Worker文件处理逻辑和普通项目不同，手动拼接的路径在生产环境无法正确指向资源。试试这几个解决办法：

方案一：用Vite原生Worker加载方式 #

不用手动指定workerSrc，直接通过Vite的?worker后缀导入Worker，让Vite自动处理打包和路径：

import PdfWorker from 'pdfjs-dist/build/pdf.worker.mjs?worker'
PDFJS.GlobalWorkerOptions.workerPort = new PdfWorker()

这种方式会让Vite单独打包Worker文件，生产环境的路径会自动适配，彻底避免路径拼接问题。

方案二：配置Vite强制打包PDF.js Worker #

如果坚持用workerSrc的方式，在vite.config.js里添加配置，确保Worker文件被正确打包到输出目录：

export default defineConfig({
  build: {
    lib: {
      entry: 'src/components/PdfViewer.vue',
      name: 'PdfViewer',
      fileName: (format) => `pdf-viewer.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      },
      plugins: [
        {
          name: 'pdf-worker-handler',
          resolveId(id) {
            if (id.includes('pdf.worker.mjs')) return id
          },
          load(id) {
            if (id.includes('pdf.worker.mjs')) {
              return `export default new URL('pdfjs-dist/build/pdf.worker.mjs', import.meta.url).href`
            }
          }
        }
      ]
    }
  }
})

之后在组件里直接导入路径即可：

import workerUrl from 'pdfjs-dist/build/pdf.worker.mjs'
PDFJS.GlobalWorkerOptions.workerSrc = workerUrl

方案三：手动部署Worker为静态资源 #

把node_modules/pdfjs-dist/build/pdf.worker.mjs复制到项目的public目录，然后直接指定绝对路径：

// 假设文件放在public/pdf.worker.mjs
PDFJS.GlobalWorkerOptions.workerSrc = '/pdf.worker.mjs'

部署时要确保这个文件和项目静态资源一起上传到服务器对应位置。

内容的提问来源于stack exchange，提问作者Foursee