<%= BASE_URL %>favicon.ico

comeOnTryAgain發表於2024-05-29

在 Vue CLI 建立的專案中，<%= BASE_URL %> 是一個模板字串，它在構建過程中會被替換為實際的基礎 URL。這個基礎 URL 通常是在 vue.config.js 檔案中定義的，或者在 Vue CLI 的預設配置中預設為 '/'（即根目錄）。

favicon.ico 是一個網站的圖示，通常顯示在瀏覽器的標籤頁上。在 Vue CLI 專案中，favicon.ico 檔案通常放在專案的 public 目錄下，因為這個目錄下的檔案不會被 Webpack 處理，而是直接複製到構建後的 dist（或其他構建目標目錄）中。

當你在 Vue 專案的 HTML 模板中看到 <%= BASE_URL %>favicon.ico 這樣的程式碼時，它實際上是在告訴 Vue CLI 在構建過程中將 favicon.ico 的路徑字首設定為基礎 URL。但是，由於 favicon.ico 通常放在 public 目錄下，並且瀏覽器預設會在根目錄下查詢它，因此你通常不需要在 favicon.ico 的路徑中使用 BASE_URL。

在 Vue CLI 專案的 public/index.html 檔案中，favicon.ico 的引用通常看起來像這樣：

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <!-- ... 其他頭部資訊 ... -->  
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">  
  <!-- 注意：在大多數情況下，你可以直接寫 href="favicon.ico" -->  
</head>  
<body>  
  <!-- ... 頁面內容 ... -->  
</body>  
</html>

但是，如上所述，由於 favicon.ico 通常放在 public 目錄下，並且瀏覽器預設會查詢根目錄下的 favicon.ico，所以大多數情況下你可以直接寫 href="favicon.ico" 而不是 <%= BASE_URL %>favicon.ico。

如果你確實需要動態地設定 favicon.ico 的路徑（這通常是不必要的），你可以確保在 vue.config.js 中設定了正確的 publicPath，但這通常只會影響構建後的資源 URL，而不是 public 目錄下的檔案。

相關文章