如何在Create React App项目中访问public文件夹内的文件？

为什么process.env.PUBLIC_URL为空？ #

在开发环境（npm start）下，process.env.PUBLIC_URL默认是空字符串，这是create-react-app的正常行为——因为开发服务器默认部署在根路径/，不需要额外路径前缀。只有当你在package.json中设置了homepage字段（比如部署到子路径时），或者手动设置了PUBLIC_URL环境变量，这个值才会有内容。

访问public文件夹数据的正确方式 #

public文件夹是create-react-app指定的静态资源目录，里面的文件会直接复制到构建产物的根目录，你可以通过两种方式访问：

1. 直接使用根路径访问
   假设你的数据文件是public/data.json，直接用/data.json作为请求路径即可：

   import './App.css';
   
   function App() {
     // 加载public/data.json
     fetch('/data.json')
       .then(res => res.json())
       .then(data => console.log('加载的数据:', data))
       .catch(err => console.error('加载失败:', err));
   
     return (
       <div className="App">
         <pre>数据加载中...</pre>
       </div>
     );
   }
   
   export default App;
   

2. 结合process.env.PUBLIC_URL（适合生产环境子路径部署）
   如果你的应用需要部署到子路径（比如https://your-domain.com/my-app/），先在package.json中添加homepage字段：

   {
     "homepage": "/my-app/"
   }
   

   此时process.env.PUBLIC_URL会自动被设置为/my-app/，你可以用它拼接路径：

   fetch(`${process.env.PUBLIC_URL}/data.json`)
     .then(res => res.json())
     .then(data => console.log(data));
   

常见误区 #

• 不要将数据文件放在src文件夹中并尝试用相对路径访问（除非你通过import导入，此时文件会被webpack打包处理）。
• 确保你是通过npm start启动开发服务器，而不是直接打开public/index.html——直接打开html会导致静态资源路径错误。

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