React点击按钮下载public文件夹PDF提示无文件如何解决

相关代码与目录结构参考：

核心是静态资源路径配置错误：

• 无论是CRA还是Vite创建的React项目，构建时public目录下的所有文件会被直接拷贝到打包产物的根目录。如果在href中写了带public前缀的路径，或者使用./assets/xxx.pdf这类相对路径，当页面路由不是根路径时，相对路径会自动拼接当前路由前缀，指向错误地址，触发文件找不到的报错。
• 少数场景下的报错由其他细节问题导致：文件名/文件夹名大小写不匹配（本地macOS/Windows系统默认大小写不敏感，线上Linux服务器大小写敏感）、文件误存到src/assets目录、项目部署在域名子路径时未做路径适配。

• 如果项目直接部署在域名根路径，直接写以/开头的绝对路径即可，不要带public前缀，建议加上download属性强制触发下载，避免浏览器默认打开PDF预览：

// 示例：文件实际存储路径为 public/assets/resume.pdf
<a 
  href="/assets/resume.pdf"
  download="个人简历.pdf"
  rel="noreferrer"
>
  <Button>My CV</Button>
</a>

• 如果项目部署在域名的子路径下（比如地址为https://xxx.com/my-personal-site/），硬写根路径会失效，需要用框架自带的环境变量拼接基础路径：
  • Vite创建的项目写法：

  <a 
    href={`${import.meta.env.BASE_URL}assets/resume.pdf`}
    download="个人简历.pdf"
  >
    <Button>My CV</Button>
  </a>
  

  • Create React App创建的项目写法：

  <a 
    href={`${process.env.PUBLIC_URL}/assets/resume.pdf`}
    download="个人简历.pdf"
  >
    <Button>My CV</Button>
  </a>
  

• 改完路径仍报错可逐一排查以下项：
  • 确认路径中的文件夹名、文件名和本地实际存储的大小写完全一致，避免出现文件命名为Resume.pdf但路径写resume.pdf的情况
  • 确认PDF文件确实存放在public/assets目录下，如果误放在src/assets目录，需要先通过import引入后再绑定到href属性，不能直接写静态路径
  • 修改配置后重启本地开发服务，清理浏览器缓存后再测试，避免缓存导致的配置不生效问题

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