vue static和assets的區別

static和assets的區別，原理就在於webpack是如何處理靜態資源的

assets

1）在vue組件中，全部模板和css都會被vue-html-loader和css-loader解析，並查找資源url。

例：<img src="./logo.png" />  或者  background: url("./logo.png")

　　由於./logo.png是相對的資源路徑，將會由webpack解析爲模塊依賴；

2）因爲logo.png不是js，當被視做模塊依賴時，須要使用url-loader和file-loader處理它，vue-cli已經配好了這些loader（webpack）所以可使用相對/模塊路徑。

3）因爲這些資源可能在構建過程當中被內聯、複製、重命名，因此它們基本是代碼的一部分，即webpack處理的靜態資源放在/src目錄中，和其它資源文件放在一塊兒。

 

事實上，沒必要把它們所有放在/src/assets文件下，可使用"模塊/組件"的組織方式來使用它們

例：能夠在每一個放置組件的目錄中存放靜態資源。

 

static

1）static目錄下的文件並不會被webpack處理，它們會直接複製到最終目錄（dist/static）下。

　  必須使用絕對路徑引用這些文件，這是經過在config.js的build.assetsPublicPath和nuild.assetsSubDirectory鏈接肯定的。

2）任何放在static/的文件須要以絕對路徑形式引用：/static/[name]。

      若是更改assetsSubDirectory的值爲assets，那麼路徑需更改成：/assets/[filename]。

 

總結

assets裏面的資源會被webpack打包進代碼，static裏面的資源就直接引用了；

通常在static裏放一些類庫的文件，assets放屬於項目的資源文件。

說的再通俗一點，就是static放別人家的資源，assets放本身家的資源。