跳至主要內容

使用 Public 資料夾

注意事項：此功能使用 react-scripts@0.5.0 或更新的版本。

變更 HTML​

public 資料夾包含 HTML 檔案，你可以進行調整，例如設定 網頁標題。在建置過程中，包含已編譯程式碼的 <script> 標籤會自動新增到其中。

在模組系統外新增資源​

你也可以將其他資源新增到 public 資料夾中。

請注意，我們通常鼓勵你改在 JavaScript 檔案中「匯入」資源。例如，請參閱有關 新增樣式表 和 新增圖片和字型 的部分。此機制提供了許多優點：

  • 指令碼和樣式表會經過縮小和彙整，以避免額外網路請求。
  • 遺漏的檔案會造成編譯錯誤，而非使用者端的 404 錯誤。
  • 產生的檔案名稱包含內容雜湊值，因此你不必擔心瀏覽器快取過舊版本。

不過，你可以使用 跳脫密道 來在模組系統外新增資源。

如果您將檔案放入 public 資料夾，它將不會由 webpack 處理。相反，它會原封不動地複製到 build 資料夾。如需參照 public 資料夾中的資源，您需要使用名為 PUBLIC_URL 的環境變數。

在 index.html 內部，您可以這樣使用它

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

只有 public 資料夾中的檔案才可以使用 %PUBLIC_URL% 前置詞存取。如果您需要使用 src 或 node_modules 中的檔案，則必須將它複製到那裡，明確表明您要將此檔案作為 build 的一部分。

當您執行 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 資料夾作為替代方案非常有用

  • 您需要一個在 build 輸出的檔案中具有特定名稱的檔案，例如 manifest.webmanifest。
  • 您有成千上萬的圖片，並且需要動態參照他們的路徑。
  • 您想要在綑綁程式碼之外包含一個小型腳本，例如 pace.js。
  • 某些函式庫可能與 webpack 不相容，而您別無選擇，只能將其包含為 <script> 標籤。

請注意，如果您新增一個宣告全域變數的 <script> ，則應在下一章節中閱讀主題 使用全域變數，其中說明如何參照變數。