主要作用

1. 存放靜態(tài)資源

• 放置 HTML、CSS、JavaScript 等靜態(tài)文件
• 存儲圖片、字體、圖標(biāo)等資源文件
• 這些文件會被原樣復(fù)制到最終的構(gòu)建目錄中

2. 入口文件

• 通常包含 index.html 作為應(yīng)用的入口文件
• 這個(gè) HTML 文件是應(yīng)用的起點(diǎn)，會被瀏覽器加載

3. 靜態(tài)資源訪問

• 存放的文件可以通過根路徑直接訪問
• 例如：public/images/logo.png 可以通過/images/logo.png訪問

與 src 目錄的區(qū)別

與 assets 目錄的區(qū)別

常見文件結(jié)構(gòu)

public/
├── index.html          # 應(yīng)用入口HTML
├── favicon.ico         # 網(wǎng)站圖標(biāo)
├── manifest.json       # PWA配置文件
├── robots.txt          # 搜索引擎爬蟲配置
├── images/             # 圖片資源
│   ├── logo.png
│   └── background.jpg
├── fonts/              # 字體文件
└── data/               # 靜態(tài)數(shù)據(jù)文件
    └── config.json

注意事項(xiàng)

1. 不要在 public 目錄中存放需要編譯的代碼
2. 避免在 public 中存放過大的文件
3. public 目錄中的文件不會被 webpack 處理
4. 使用 % PUBLIC_URL% 或 process.env.PUBLIC_URL 引用路徑
5. 不要在 public 中存放敏感信息

框架特定說明

React 項(xiàng)目

• public 目錄是 Create React App 約定的靜態(tài)資源目錄
• % PUBLIC_URL% 會被替換為實(shí)際的公共路徑

Vue 項(xiàng)目

• Vue CLI 項(xiàng)目中對應(yīng)的是 public 目錄
• 使用process.env.BASE_URL引用公共路徑（vite已移除）

常見問題

Q: 為什么不直接使用相對路徑？

Q: public 目錄中的文件會被打包嗎？

Q: 什么時(shí)候應(yīng)該使用 public 目錄？

• 引用不經(jīng)過 webpack 處理的靜態(tài)資源
• 在 HTML 中直接引用資源
• 訪問打包后的文件
• 使用動態(tài)加載的資源