vue中檔案在assets與static的區別

2021-09-11 15:28:45 字數 567 閱讀 9861

相同點:資源在html中使用,都是可以的。

不同點:使用assets下面的資源,在js中使用的話,路徑要經過webpack中file-loader編譯,路徑不能直接寫。

assets中的檔案會經過webpack打包,重新編譯,推薦該方式。而static中的檔案,不會經過編譯。專案在經過打包後,會生成dist資料夾,static中的檔案只是複製一遍而已。簡單來說,static中建議放一些外部第三方,自己的放到assets,別人的放到static中。

注意:如果把放在assets與static中,html頁面可以使用;但在動態繫結中,assets路徑的會載入失敗,因為webpack使用的是commenjs規範,必須使用require才可以,具體**如下:

html

直接使用路徑

動態繫結路徑

js

data ()

}

效果圖

原文: 

在assets中的檔案

assets資源與其他的資源都不一樣。該資源所在的目錄不在res目錄中。而是與res平級的assets目錄 這個目錄的資源都不會生成資源id 因此,在讀取這些資源檔案時需要直接使用資源檔名。例如在assets中有乙個test.txt檔案,以下是用 讀取該檔案的方法 try 開啟test.txt檔案,...

在assets中的檔案

assets資源與其他的資源都不一樣。該資源所在的目錄不在res目錄中。而是與res平級的assets目錄 這個目錄的資源都不會生成資源id 因此,在讀取這些資源檔案時需要直接使用資源檔名。例如在assets中有乙個test.txt檔案,以下是用 讀取該檔案的方法 try 開啟test.txt檔案,...

vue中assets與static的區別

相同點 資源在html中使用,都是可以的 不同點 使用assets下面的資源,在js中使用的話,路徑要經過webpack中file loader編譯,路徑不能直接寫。assets中的檔案會經過webpack打包,重新編譯,推薦該方式。而static中的檔案,不會經過編譯。專案在經過打包後,會生成di...