Create React App中PUBLIC_URL为空无法访问public文件夹的解决办法

首先明确：开发环境下PUBLIC_URL为空是正常行为，因为开发服务器默认将public文件夹作为根目录，空字符串拼接图片绝对路径（以/开头）就能正确访问资源。如果你的product.image.desktop是相对路径（比如images/xxx.jpg），那才会出问题，这种情况先把图片路径改成绝对路径（/images/xxx.jpg），再用原来的代码就能正常工作。

要让PUBLIC_URL在生产环境和本地环境都符合预期，按以下两种方式处理：

1. 通过package.json的homepage字段配置 #

这是官方推荐的方式，无需手动设置环境变量：

• 如果部署在域名根目录（比如https://your-domain.com/），在package.json中添加：

  "homepage": "."
  

• 如果部署在子路径（比如https://your-domain.com/my-app/），添加：

  "homepage": "/my-app"
  

配置后：

• 开发环境：PUBLIC_URL会自动适配开发服务器路径，保证本地访问正常
• 生产环境：执行npm run build时，PUBLIC_URL会被自动设置为你配置的homepage值，打包后的资源路径会自动适配

2. 手动设置环境变量（适合临时或特定场景） #

如果不想修改package.json，可以在执行构建命令时手动指定PUBLIC_URL：

• Windows系统：

  set PUBLIC_URL=/your-subpath && npm run build
  

• Linux/Mac系统：

  PUBLIC_URL=/your-subpath npm run build
  

开发环境下如果需要强制设置PUBLIC_URL，可以在项目根目录创建.env.development文件，添加：

PUBLIC_URL=http://localhost:3000

不过开发环境一般不需要这么做，因为默认空值配合绝对路径图片已经能正常访问。

最后检查你的product.image.desktop是否为绝对路径（以/开头），比如/images/desktop-1.jpg，这样不管PUBLIC_URL是空还是子路径，拼接后的路径都是正确的：

<img
  src={process.env.PUBLIC_URL + product.image.desktop}
  alt={product.name}
/>

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