- 放置 HTML、CSS、JavaScript 等靜態(tài)文件
- 存儲圖片、字體、圖標(biāo)等資源文件
- 這些文件會被原樣復(fù)制到最終的構(gòu)建目錄中
- 通常包含 index.html 作為應(yīng)用的入口文件
- 這個(gè) HTML 文件是應(yīng)用的起點(diǎn),會被瀏覽器加載
- 存放的文件可以通過根路徑直接訪問
- 例如:public/images/logo.png 可以通過
/images/logo.png訪問
![image]()
![image]()
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
- 不要在 public 目錄中存放需要編譯的代碼
- 避免在 public 中存放過大的文件
- public 目錄中的文件不會被 webpack 處理
- 使用 % PUBLIC_URL% 或 process.env.PUBLIC_URL 引用路徑
- 不要在 public 中存放敏感信息
- public 目錄是 Create React App 約定的靜態(tài)資源目錄
- % PUBLIC_URL% 會被替換為實(shí)際的公共路徑
- Vue CLI 項(xiàng)目中對應(yīng)的是 public 目錄
- 使用
process.env.BASE_URL引用公共路徑(vite已移除)
A: 使用 process.env.BASE_URL 可以確保在不同的部署環(huán)境下(如子目錄部署)資源路徑都能正確解析。
A: 不會,這些文件會被原樣復(fù)制到 dist 目錄中,不經(jīng)過 webpack 處理。
A: 當(dāng)你需要:
- 引用不經(jīng)過 webpack 處理的靜態(tài)資源
- 在 HTML 中直接引用資源
- 訪問打包后的文件
- 使用動態(tài)加載的資源
通過合理使用 public 目錄和 process.env.BASE_URL,你可以更好地管理 Vue CLI 項(xiàng)目中的靜態(tài)資源,確保應(yīng)用在不同環(huán)境下都能正常運(yùn)行。