Create React App 使用 public 文件夹

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

创建 public 文件夹

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

mkdir public

添加静态资源

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

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

public/
  images/
    logo.png

引用 public 文件夹中的资源

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

// www.javascriptcn.com code example
import React from 'react';

function App() {
  return (
    <div>
      <img src={process.env.PUBLIC_URL + '/images/logo.png'} alt="Logo" />
    </div>
  );
}

export default App;

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

注意事项

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

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