您會注意到專案結構中有兩個用於資源的目錄：/public/ 和 /src/assets/。它們之間有什麼區別？有些是靜態資源，而另一些則由建置系統處理和嵌入。
因此，讓我們嘗試回答上面的問題。我們先來談談使用常規資源，然後我們將看看靜態資源有什麼不同。
常規資源 - /src/assets
在 *.vue 元件中，您的所有範本和 CSS 都由 vue-html-loader 和 css-loader 解析，以尋找資源 URL。例如，在 <img src="./logo.png"> 和 background: url(./logo.png) 中，"./logo.png" 是一個相對資源路徑，將由 Vite 解析為模組依賴項。
由於這些資源可能會在建置期間內聯/複製/重新命名，因此它們本質上是您的原始碼的一部分。這就是為什麼建議將 Vite 處理的資源放在 /src/assets 中，與其他原始檔放在一起。實際上，您甚至不必將它們全部放在 /src/assets 中：您可以根據使用它們的模組/元件來組織它們。例如，您可以將每個元件放在自己的目錄中，並將其靜態資源放在旁邊。
資源解析規則
相對 URL，例如 ./assets/logo.png 將被解釋為模組依賴項。它們將被替換為基於您的 Vite 輸出配置自動生成的 URL。
以 ~ 為前綴的 URL 被視為模組請求，類似於 import 'some-module/image.png'。如果您想利用 Vite 的模組解析配置，則需要使用此前綴。Quasar 預設提供 assets 別名，因此建議您像這樣使用它：<img src="~assets/logo.png">。請注意 ‘assets’ 前面的 ~。
靜態資源 - /public
根相對 URL（例如 /logo.png – 其中 ‘/’ 是您的 publicPath）或 logo.png 根本不會被處理。這應該放在 public/ 中。這些將完全不會被處理。public 資料夾的內容只是按原樣複製到可發佈資料夾中。
資源 vs 靜態資源
僅當「assets」資料夾中的檔案在您的 Vue 檔案之一中具有文字引用時，才會包含在您的建置中。「public」資料夾中的每個檔案和資料夾都會按原樣複製到您的生產建置中，無論如何。
警告
當不建置 SPA/PWA/SSR 時，/public/icons/* 和 /public/favicon.ico 將不會嵌入到您的應用程式中，因為它們不會有任何用途。例如，Electron 或 Cordova 應用程式不需要這些檔案。
有關 Vite 的更多資訊
請閱讀 Vite 的指南 此處。