React部署作品集时出现404资源加载错误如何解决？

针对你遇到的部署后 src/assets 里的图片、PDF等资源返回404的问题，给你几个针对性的排查和解决步骤：

1. 规范 public 文件夹资源的引用 #

如果你已经把资源移到了项目根目录的 public 文件夹，引用时必须用根路径开头（以 / 起始），不能用相对路径或带 src/ 的路径：

• 图片引用示例：<img src="/assets/your-image.png" alt="描述" />
• PDF下载链接示例：<a href="/assets/your-resume.pdf" target="_blank">查看简历</a>

补充：public 目录下的资源会被直接复制到构建后的 build 根目录，所以根路径引用才能正确指向文件位置。

2. 配置 package.json 中的 homepage 字段 #

如果是部署到GitHub Pages或者服务器的子目录（比如你的仓库是 portafolio），必须在 package.json 里添加 homepage，否则构建后的资源路径会错误：

"homepage": "https://MaximilianoLeonel23.github.io/portafolio"

如果是部署到自己服务器的 /portafolio 子目录，就写：

"homepage": "/portafolio"

添加完成后，重新执行 npm run build，再部署生成的 build 文件夹内容。

3. 正确导入 src/assets 中的资源 #

如果资源保留在 src/assets，不要直接写路径引用，要通过ES模块导入的方式使用：

// 导入资源
import projectSvg from './assets/project-icon.svg';
import resumePdf from './assets/resume.pdf';

// 使用资源
<img src={projectSvg} alt="项目图标" />
<a href={resumePdf} target="_blank">下载简历</a>

这种方式下，Webpack会自动处理资源的打包和路径映射，构建后会生成正确的引用地址。

4. 核对构建后的文件结构 #

执行 npm run build 后，打开生成的 build 文件夹：

• public/assets 里的资源应该出现在 build/assets 目录下
• src/assets 导入的资源会被打包到 build/static/media 目录，文件名会带有哈希后缀
  对比页面上的资源引用路径和实际文件路径是否一致，就能快速定位问题。

内容的提问来源于stack exchange，提问作者Maximiliano Leonel Pérez