vue 項目中assets 和static的區別

一、Webpacked Assets

為了回答這個問題，我們首先需要了解Webpack如何處理靜態資產。在 *.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處理它。vue-cli 的 webpack 腳手架已經配置了這些 loader，因此可以使用相對/模塊路徑。

由於這些資源可能在構建過程中被內聯/復制/重命名，所以它們基本上是源代碼的一部分。這就是為什么建議將Webpack 處理的靜態資源放在 /src 目錄中和其它源文件放一起的原因。事實上，甚至不必把它們全部放在 /src/assets：可以用模塊/組件的組織方式來使用它們。例如，可以在每個放置組件的目錄中存放靜態資源。

資源處理規則

• • 相對URL（./assets/logo.png）：將會被解釋成一個模塊依賴。它們會被一個基於你的Webpack輸出配置自動生成的URL替代。
  • 沒有前綴的URL（assets/logo.png）：將會被看成相對URL，並且轉換成./assets/logo.png。
  • 前綴帶~的URL（~assets/logo.png）：會被當成模塊請求, 類似於require(‘some-module/image.png'). 如果你想要利用Webpack的模塊處理配置，就可以使用這個前綴。例如，如果你有一個對於assets的路徑解析，你需要使用 <img src="~assets/logo.png"> 來確保解析是對應上的。
  • 相對根目錄的URL（/assets/logo.png）：不會被處理。

在JavaScript里獲取資源路徑

為了能讓Webpack返回正確的資源路徑，你需要使用require('./relative/path/to/file.jpg')，由file-loader進行解析，然后返回處理過的URL。例如：

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

注意上例將會包含每個在最后一次build中的./bgs/ 下的圖片。 這是由於 Webpack 無法推測它們哪個會在運行時被使用, 因此會包含所有圖片.

二、"Real" Static Assets

相比之下，static/ 目錄下的文件並不會被 Webpack 處理：它們會直接被復制到最終目錄（默認是dist/static）下。必須使用絕對路徑引用這些文件，這是通過在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 連接來確定的。

任何放在 static/ 中文件需要以絕對路徑的形式引用：/static/[filename]。如果更改 assetSubDirectory 的值為 assets，那么路徑需改為 /assets/[filename]。

// config/index.js
module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

三、使用區別

<template>
   <img :src="filterIcon(item.pollingState)" alt="" class="pollingIcon"> 
</template>
<script>
    export default {
        methods: {
            filterIcon(val) {
                let commonUrl = '../../../../static/images/assetpolling/';
                if (val === 1) {
                  return commonUrl + 'pollingSuccess.png';
                } else {
                  return commonUrl + 'pollingLoading.gif';
                }
              }
        }
    }
</script>

如果src的值是一個變量，放在staic下能訪問到圖片，放在assets下訪問不到。如果是一個字符串常量，static和assets下都可以訪問到。

分析：官方說，在 *.vue組件中，所有模板和CSS都會被 vue-html-loader 及 css-loader 解析，並查找資源URL。所以對應的資源如果是個字符串常量，在編譯期就已經被解析為Base64與代碼融合為一體。而如果src對應的是個變量，只有在運行期才會被解析，這時候就訪問不到assets目錄下的資源了。

結論:當資源對應的是變量時，資源放在static下。第三方的類庫的資源也放在static下。

參考譯文：https://blog.csdn.net/riddle1981/article/details/78469032?utm_source=blogxgwz4

官網原文：http://vuejs-templates.github.io/webpack/static.html