為了回答這個問題，我們首先需要了解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：可以用模塊/組件的組織方式來使用它們。例如，可以在每個放置組件的目錄中存放靜態資源。
"Real" Static Assets
相比之下，static/ 目錄下的文件並不會被 Webpack 處理：它們會直接被復制到最終目錄（默認是dist/static）下。必須使用絕對路徑引用這些文件，這是通過在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 連接來確定的。
任何放在 static/ 中文件需要以絕對路徑的形式引用：/static/[filename]。如果更改 assetSubDirectory 的值為 assets，那么路徑需改為 /assets/[filename]。
有時我們需要修改nodeModule中的源碼，插件源碼修改后，打包后的文件應放在static目錄。如果放在其他目錄，webpack會重新打包，導致出現例如：did you register the component correctly? 這個組件報錯