1.assets文件夾
通過相對路徑被引入,這類引用會被webpack處理;
比如:
會被編譯成:
再比如:
會被編譯成:
2.public文件夾
放在public目錄下的資源會被直接復制,不會經過webpack的打包處理。
但是要注意的是:public中的空文件夾資源是不會被復制的。
即使使用copy-webpack-plugin也是不會被copy的。
所以如果要引用的資源不希望被webpack處理時,可以將其放在public文件夾下,在index.html內引用資源文件且不希望被webpaxk處理時,可以加上前綴:
<%= BASE_URL %>
示例如下:
3.VUE項目中的asset文件夾和public文件夾的區別
vue項目中有時候在糾結靜態資源應該放在static文件夾或者public文件夾中。
都知道,vue項目build以后會生成一個dist文件夾,打包后的文件都放那這里。
3.1.public
public文件夾中的文件會原封不動的放到dist文件夾中。比如我現在有個test文件夾,里面有個test.js文件:
里面有少量代碼。
運行build以后,看dist文件夾:
可以看到,test文件與test.js文件中的內容被原封不動的放到了dist文件夾中,且不會被壓縮、合並
3.2.assets
build之后,assets目錄中的文件,會被合並到一個文件中,然后進行壓縮。多用來存放業務級的js、css等,如一些全局的scss樣式文件、全局的工具類js文件等。