vue靜態資源放在src/assets與static目錄下的區別

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：可以用模塊/組件的組織方式來使用它們。例如，可以在每個放置組件的目錄中存放靜態資源。

static

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

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

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

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

結論:當資源對應的是變量時，資源放在static下。第三方的類庫的資源也放在static下。其他時候個人感覺相同。

應用： 在src/components/ele.vue中，data數據里引入文件數據

 

imgsUrl:[
          {src:'../static/imgs/02.jpg'},
          {src:'./static/imgs/03.jpg'},
          {src:'http://www.pptok.com/wp-content/uploads/2012/08/xunguang-4.jpg'}
     ]

 

第一行為相對路徑，第二行為使用絕對URL引用./static/[filename]，第三行為網上圖片路徑。

建議做法為：絕對URL引用./static/[filename]

 

補充：

 

    在原來的絕對URL引用/static/[filename]基礎上，在最之前添加了一個點.，因為vue項目打包后，如果不加.，無法正確獲取圖片等靜態資源路徑。