您會注意到在專案結構中，我們有兩個目錄用於資源：/public/ 和 /src/assets/。它們之間有什麼區別？有些是靜態資源，而另一些則由建置系統處理和嵌入。

讓我們嘗試回答上面的問題。我們先討論使用常規資源，然後我們將了解靜態資源有什麼區別。

常規資源 - /src/assets

在 *.vue 組件中，您的所有模板和 CSS 都由 vue-html-loader 和 css-loader 解析，以尋找資源 URL。例如，在 <img src="./logo.png"> 和 background: url(./logo.png) 中，"./logo.png" 是一個相對資源路徑，將由 Webpack 解析為模組依賴項。

因為 logo.png 不是 JavaScript，當作為模組依賴項處理時，我們需要使用 url-loader 和 file-loader 來處理它。Quasar CLI 已經為您配置了這些 webpack loader，因此您可以免費獲得諸如檔案名稱指紋識別和條件 base64 內聯等功能，同時能夠使用相對/模組路徑而無需擔心部署。

由於這些資源可能會在建置期間內聯/複製/重新命名，因此它們本質上是您原始碼的一部分。這就是為什麼建議將 Webpack 處理的資源放在 /src/assets 中，與其他原始程式檔放在一起。實際上，您甚至不必將它們全部放在 /src/assets 中：您可以根據使用它們的模組/組件來組織它們。例如，您可以將每個組件放在自己的目錄中，並將其靜態資源放在旁邊。

資源解析規則

相對 URL，例如 ./assets/logo.png 將被解釋為模組依賴項。它們將被替換為根據您的 Webpack 輸出配置自動生成的 URL。

以 ~ 為前綴的 URL 被視為模組請求，類似於 require('some-module/image.png')。如果您想利用 Webpack 的模組解析配置，則需要使用此前綴。Quasar 預設提供了 assets Webpack 別名，因此建議您像這樣使用它：<img src="~assets/logo.png">。請注意 ‘assets’ 前面的 ~。

靜態資源 - /public

根相對 URL（例如 /logo.png – 其中 ‘/’ 是您的 publicPath）或 logo.png 根本不處理。這應該放在 public/ 中。這些完全不會由 Webpack 處理。public 資料夾的內容只是按原樣複製到可發佈的資料夾中。

Quasar 在幕後有一些智慧演算法，可確保無論您建置什麼（SPA、PWA、Cordova、Electron），您的靜態資源都會被正確引用，*前提是*它們不使用相對路徑。

<!-- Good! -->
<img src="logo.png">

<!--
  BAD! Works until you change vue router
  mode (hash/history) or your public path.
  Don't!
-->
<img src="/logo.png">

Vue 綁定僅需要靜態資源

請注意，每當您將 “src” 綁定到 Vue 作用域中的變數時，它都必須來自 public 資料夾。原因很簡單：URL 是動態的，因此 Webpack（在編譯時打包資源）不知道您在運行時將引用哪個檔案，因此它不會處理 URL。

<template>
  <!-- imageSrc MUST reference a file from /public -->
  <img :src="imageSrc">
</template>

<script>
export default {
  setup () {
    return {
      /*
        Referencing /public.
        Notice string doesn't start with a slash. (/)
      */
      imageSrc: 'logo.png'
    }
  }
}
</script>

您可以透過將 src 綁定到 Vue 的值來強制提供靜態資源。不要使用 src="path/to/image"，而是使用 :src=" 'path/to/image' " 或 :src="imageSrc"。請注意第二個程式碼範例中雙引號內使用單引號（已新增空格以在文件網站上視覺化查看 - 通常您不會有空格）。

在 JavaScript 中取得資源路徑

為了讓 Webpack 返回正確的資源路徑，您需要使用 require('./relative/path/to/file.jpg')，它將由 file-loader 處理並返回已解析的 URL。例如

computed: {
  background () {
    return require('./bgs/' + this.id + '.jpg')
  }
}

請注意，上面的範例將在最終建置中包含 ./bgs/ 下的每個圖像。這是因為 Webpack 無法猜測運行時將使用其中哪些圖像，因此它會包含所有圖像。