React-Pdf中src组件引用public下pdf.worker.js的正确路径配置问题

你遇到的问题核心是jsconfig的baseUrl只影响src目录内的模块导入，不影响静态资源的路径解析，所以你原本写的/pdf.worker.js路径其实是正确的，以下是具体的排查和优化方案：

一、先确认路径有效性 #

public文件夹是React项目的静态资源根目录，所有放在这里的文件都可以通过/文件名直接访问，和jsconfig.json的baseUrl配置无关。你可以先在浏览器地址栏直接访问http://localhost:3000/pdf.worker.js，如果能正常下载文件，说明路径没问题，大概率是缓存问题——清空浏览器缓存或按Ctrl+F5强制刷新即可。

二、两种可行的配置写法 #

1. 直接使用根路径（简单直接） #

<Document
  file={pdf}
  options={{ workerSrc: "/pdf.worker.js" }}
  onLoadSuccess={onDocumentLoadSuccess}
></Document>

2. 使用PUBLIC_URL环境变量（适配部署场景） #

如果你的项目未来可能部署到非域名根路径（比如https://example.com/your-app/），推荐用process.env.PUBLIC_URL拼接路径，避免部署后路径失效：

<Document
  file={pdf}
  options={{ workerSrc: `${process.env.PUBLIC_URL}/pdf.worker.js` }}
  onLoadSuccess={onDocumentLoadSuccess}
></Document>

3. 全局配置worker路径（和你之前CDN写法兼容） #

也可以沿用你之前的全局配置方式，只替换为本地路径：

import { Document, Page, pdfjs } from "react-pdf";

// 直接用根路径
pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.js";

// 或者用PUBLIC_URL适配部署
// pdfjs.GlobalWorkerOptions.workerSrc = `${process.env.PUBLIC_URL}/pdf.worker.js`;

三、常见排查点 #

• 确认pdf.worker.js确实放在public文件夹的根目录，如果嵌套在子文件夹（比如public/js/pdf.worker.js），路径要改成/js/pdf.worker.js
• 查看浏览器控制台的Network面板，确认pdf.worker.js的请求状态是否为200，排查是否有加载报错
• 如果用自定义Webpack配置，确保public文件夹被正确配置为静态资源目录

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