跳至主要内容

使用公共文件夹

注意：此功能在 [email protected] 及更高版本中可用。

更改 HTML​

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

在模块系统之外添加资源​

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

请注意，我们通常建议您在 JavaScript 文件中 import 资源。例如，请参阅有关 添加样式表 和 添加图像和字体 的部分。这种机制提供了许多好处

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

但是，有一个**备用方案**，您可以使用它来添加模块系统之外的资产。

如果您将文件放入 public 文件夹，它**不会**被 webpack 处理。相反，它将被原样复制到构建文件夹中。要引用 public 文件夹中的资产，您需要使用名为 PUBLIC_URL 的环境变量。

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

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

只有 public 文件夹中的文件可以通过 %PUBLIC_URL% 前缀访问。如果您需要使用来自 src 或 node_modules 的文件，您将不得不将其复制到那里以明确指定您要将此文件作为构建的一部分。

当您运行 npm run build 时，Create React App 会将 %PUBLIC_URL% 替换为正确的绝对路径，因此即使您使用客户端路由或将其托管在非根 URL 上，您的项目也能正常工作。

在 JavaScript 代码中，您可以使用 process.env.PUBLIC_URL 来实现类似的目的

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

请记住这种方法的缺点

  • public 文件夹中的所有文件都不会被后处理或压缩。
  • 缺少的文件不会在编译时被调用，并且会导致用户出现 404 错误。
  • 结果文件名不会包含内容哈希，因此您需要添加查询参数或在每次更改时重命名它们。

何时使用 public 文件夹​

通常我们建议从 JavaScript 中导入样式表、图像和字体。public 文件夹对于许多不太常见的情况来说是一个有用的解决方法

  • 您需要在构建输出中有一个特定名称的文件，例如 manifest.webmanifest。
  • 你有成千上万的图片，需要动态引用它们的路径。
  • 你想要在捆绑代码之外包含一个像 pace.js 这样的小型脚本。
  • 某些库可能与 webpack 不兼容，你没有其他选择，只能将其作为 <script> 标签包含进来。

请注意，如果你添加了一个声明全局变量的 <script>，你应该阅读下一节中的主题 使用全局变量，它解释了如何引用它们。