Edit

使用 public 文件夹

注意：此功能适用于 react-scripts@0.5.0 及更高版本。

更改HTML

public 文件夹包含 HTML 文件，因此你可以对其进行调整，例如，设置页面标题。带有编译代码的 <script> 标记将在构建过程中自动添加到该标记中。

在模块系统之外添加静态资源

你还可以将其他资源添加到 public 文件夹。

请注意，我们通常建议你改为在 JavaScript 文件中导入资源。例如，请参阅有关 添加一个样式表 以及 添加图片和字体 部分。这种机制提供了许多好处：

  • 脚本和样式被压缩并打包在一起，以避免额外的网络请求。
  • 缺少文件会导致编译错误，而不是给用户 404 错误。
  • 结果文件名包含内容哈希，因此你无需担心浏览器会缓存旧版本。

但是，你可以使用 escape hatch(逃生舱) ，在模块系统之外添加资源。

如果将文件放入 public 文件夹，Webpack 将 不会 处理它。相反，它将被复制到构建文件夹中。要引用 public 文件夹中的资源，需要使用名为 PUBLIC_URL 的特殊变量。

在 index.html 中，你可以像这样使用它：

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

只有 %PUBLIC_URL% 前缀才能访问 public 文件夹中的文件。如果你需要使用 src 或 node_modules 中的文件，则必须将其复制到 public 文件夹，以显式指定将该文件作为构建的一部分的意图。

当你运行 npm run build 时，Create React App 将使用正确的绝对路径替换 %PUBLIC_URL% ，这样即使你使用客户端路由或将其托管在 non-root 上，你的项目也能正常工作。

在 JavaScript 代码中，你可以使用 process.env.PUBLIC_URL 用于类似目的：

render() {
  // 注意：这是一个逃生舱（escape hatch），应该谨慎使用！
  // 通常我们建议使用`import`来获取资源的 URL 
  // 如我们上一节 “添加图片和字体”中所述。
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

请记住这种方法的缺点：

  • public 文件夹中的所有文件都不会进行后处理或压缩。
  • 在编译时不会调用丢失的文件，并且会导致用户出现 404 错误。
  • 结果文件名不包含内容哈希值，因此你需要添加查询参数或在每次更改时重命名它们（，以便清除浏览器缓存）。

何时使用 public 文件夹 When to Use the public Folder

通常我们建议从 JavaScript 导入 stylesheets ，图片和字体 。 public文件夹可用作许多不常见情况的变通方法：

  • 你需要在构建输出中具有特定名称的文件，例如 manifest.webmanifest 。
  • 你有数千张图片，需要动态引用它们的路径。
  • 你希望在打包代码之外包含一个像 pace.js 这样的小脚本。
  • 某些库可能与 Webpack 不兼容，你没有其他选择，只能将其包含为 <script> 标记。

请注意，如果添加声明全局变量的 <script> ，则还需要阅读有关使用它们的下一部分。

← PreviousNext →