關於vue項目下的assets文件夾與static文件夾的區別

相同點:文件夾中的資源在html中使用都是可以的。
不同點:在js中使用assets下面的資源的話,路徑要經過webpack中的file-loader編譯,路徑不能直接寫。

static :

在項目打包過程中,使用命令npm run build時,該目錄下的文件不會被wabpack處理的,它們會被直接複製到最終的打包目錄下面(默認是dist/static ),使用時必須使用絕對路徑來引用這些文件,這是在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 設置來確定的。

注意:任何放在 static 中的文件需要以絕對路徑的形式引用:/static/[filename]

assets:

在項目打包過程中,使用命令npm run build時,src目錄下的assets 中的文件會經過 webpack 進行打包編譯。

總結:

1、static中的文件,是不會經過編譯的,打包後會生成dist文件夾,static中的文件是複製的static的文件。建議static目錄中放一些外部的第三方的文件,自己的文件最好放在assets文件中。
2、若把圖片放在assets和static中,html頁面中都可以使用; 但是在動態綁定中,assets路徑的圖片會加載失敗,因爲webpack使用的是 commenJS 規範,必須使用require纔可以。所以圖片等信息最好放在static中。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章