React项目部署AWS Amplify后PDF下载加载失败求助

我在开发个人作品集网站的简历PDF下载功能，本地localhost测试完全正常，但部署到AWS Amplify后出现「failed to load pdf document」错误。已尝试将导入路径从相对改为绝对，问题仍未解决。当前简历PDF位于项目根目录，相关代码及配置如下：

相关代码 #

import resume from './KuroUsaResume.pdf'
import 'stylesheets/Home.css';

function Home() {
  return (
    <div className="home">
      .....
        <a href={resume} download="KuroUsa's_Resume.pdf">
          <button className='home--download-button'>Download CV</button>
        </a>
      </div> 

      <div className="home--body">
        <img src={me} className="logo" alt="logo" />
      </div>
    </div>
  );
}

export default Home;

jsconfig配置 #

{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
}

解决方案 #

• 调整PDF文件位置与导入路径
  你的jsconfig设置了baseUrl: "src"，但PDF放在项目根目录，相对路径./KuroUsaResume.pdf在打包时可能无法被正确解析。建议将PDF移到src/assets目录下，然后用绝对路径导入：

  import resume from 'assets/KuroUsaResume.pdf'
  

  这样打包工具能正确识别资源并将其复制到构建产物中。

• 利用public目录存放静态资源
  如果是Create React App项目，直接将PDF放到项目根目录的public文件夹下，无需import，直接用根路径引用：

  <a href="/KuroUsaResume.pdf" download="KuroUsa's_Resume.pdf">
    <button className='home--download-button'>Download CV</button>
  </a>
  

  public目录下的文件会被直接复制到build根目录，避免打包路径解析问题。

• 检查AWS Amplify部署配置

  1. 登录Amplify控制台，进入项目的「部署设置」，确认构建命令（如npm run build）和构建产物目录（如build）正确。
  2. 检查「重写和重定向」规则，避免拦截静态资源请求。示例规则：

     [
       {
         "source": "/<*>",
         "target": "/index.html",
         "status": "200",
         "condition": {
           "not": [{"source": "/assets/<*>", "operator": "Equal", "value": "/assets/<*>"}]
         }
       }
     ]
     

• 清除Amplify缓存并重新部署
  在Amplify控制台的「部署历史」中，选择最新部署记录，点击「重新构建并部署」，勾选「清除缓存」选项，彻底更新部署资源。

• 确认打包工具的静态资源规则
  若使用自定义webpack配置，需确保添加PDF文件的处理规则（webpack 5+示例）：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(pdf)$/,
          type: 'asset/resource',
          generator: {filename: 'assets/[name][ext]'}
        }
      ]
    }
  }
  

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