pdf.js(pdfdist)踩坑workerSrc报错pdf.worker.mjs无法正确获取

第一次遇到的时候我习惯性交给AI，AI按照搜索结果修改了workerSrc配置，解决了引用的为题，但是最终部署服务器还是不能用。

后面还是人工花了些功夫把这个点搞明白，然后手动改了nginx配置才修复。

AI还得加油啊！你以后可是我们的赛博牛马

这里有两个问题！！！两个问题！！！一定要看完！！！
这里有两个问题！！！两个问题！！！一定要看完！！！
这里有两个问题！！！两个问题！！！一定要看完！！！

第一步报错

现象

pdfjsLib报错

原因

PDFJS.GlobalWorkerOptions.workerSrc 未配置，配置了就行。
main.js和vite.config.ts都要改，不复杂。

解决

javascript 复制代码

// main.js
// 手动设置workerSrc
// 设置为BASE_URL拼接，保证和部署环境路径一致
import * as PDFJS from 'pdfjs-dist';
PDFJS.GlobalWorkerOptions.workerSrc = `${import.meta.env.BASE_URL}assets/pdf.worker.mjs`;

javascript 复制代码

// vite.config.ts
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    ...
    // 复制 PDF.js worker 文件到输出目录
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/pdfjs-dist/build/pdf.worker.mjs',
          dest: 'assets'
        }
      ]
    })
  ],
  ...
})

结果

打包之后就能看到/dist/assets目录下面多了几个文件，这就是pdf.js需要的文件。

我们要的是pdf.worker.mjs这个文件。

现在项目文件就改完了，接下来还要改nginx配置

第二步报错【重要】

现象

现在把项目打包放到服务器上还是会报错

pdfdist 报错 Error: Setting up fake worker failed: "Failed to fetch dynamically imported module......

原因

pdf.worker.mjs文件是获取到了，不过header格式不对，文件类型需要改为js脚本文件才能被浏览器正确解析。

解决

改服务器nginx配置文件。（apache同理）

这里需要改http.types配置项，其他的文档讲得很模糊，我这里写得细一点。

目前大部分版本的nginx对文件MIME 类型配置都是在mime.types文件里列出来的，.mjs是ES模块，默认没有配置。

而我们要做的很简单，就是把.mjs类型支持加上。可以直接在http配置里加，也可以在http.types里加，任选其一即可。

【方案1】加在nginx.conf里

javascript 复制代码

// nginx.conf

http {
    include mime.types;
    default_type application/octet-stream;

    types {
        # 添加 .mjs 文件的 MIME 类型映射
        application/javascript mjs;
    }
    ...
}

【方案2】加在http.types里

javascript 复制代码

// http.types
	...
   application/javascript     js;
   application/javascript     mjs; # 添加这一行来正确处理mjs文件
   application/atom+xml       atom;
   ...

最后重启nginx

【完毕】