Create React App 使用 public 文件夹

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

在 Create React App 中,public 文件夹是一个专门用来存放静态资源的文件夹。这些静态资源不会被 webpack 打包,而是直接复制到最终的构建目录中。

创建 public 文件夹

要在 Create React App 项目中使用 public 文件夹,首先需要在项目根目录下创建一个名为 public 的文件夹。可以使用以下命令在项目根目录下创建 public 文件夹:

----- ------

添加静态资源

在 public 文件夹中,可以添加各种静态资源,如图片、字体、HTML 文件等。这些资源将会被直接复制到最终的构建目录中,而不会被 webpack 打包。

例如,可以在 public 文件夹中创建一个名为 images 的文件夹,并将一张图片文件放入其中:

-------
  -------
    --------

引用 public 文件夹中的资源

在 React 组件中,可以直接引用 public 文件夹中的静态资源。例如,可以在 JSX 中引用 public 文件夹中的图片:

------ ----- ---- --------

-------- ----- -
  ------ -
    -----
      ---- --------------------------- - ------------------- ---------- --
    ------
  --
-

------ ------- ----

在上面的代码中,process.env.PUBLIC_URL 表示 public 文件夹的路径。因此,可以通过 process.env.PUBLIC_URL + '/images/logo.png' 来引用 public 文件夹中的图片。

注意事项

  • 在 public 文件夹中添加的资源不会被压缩或处理,因此需要手动优化这些资源。
  • 避免在 public 文件夹中存放敏感信息或私密文件,因为这些文件会被直接暴露在构建目录中。

通过 public 文件夹,可以方便地管理和引用项目中的静态资源,使项目结构更加清晰和易于维护。


上一篇:添加图片,字体和文件
下一篇:代码拆分(Code Splitting)