原文地址：我的稀土掘金 預設打包： 所有文件都放在了assets文件夾 期望： css,js.img等等進行歸類 解決辦法 vite.config.js build:{ rollupOptions:{ output:{ chunkFileNames: 'static/js/[name]-[hash] ...
原文地址：我的稀土掘金
預設打包：
所有文件都放在了assets文件夾
期望：
- css,js.img等等進行歸類
解決辦法
vite.config.js
build:{
rollupOptions:{
output:{
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames:'static/[ext]/[name]-[hash][extname]',
//manualChunks 兩種使用形式
// manualChunks:{
// elementPlus:['element-plus']
// }
manualChunks(id) {
if (id.includes('element-plus')) {
return 'element-plus';
}
}
}
}
}
名詞解釋
- rollupOptions 自定義底層的 Rollup 打包配置。這與從 Rollup 配置文件導出的選項相同，並將與 Vite 的內部 Rollup 選項合併。查看 Rollup 選項文檔 獲取更多細節。
- output 輸出設置
- output.chunkFileNames 該選項用於對代碼分割中產生的 chunk 文件自定義命名。預設值：
"[name]-[hash].js"。
該選項用於對代碼分割中產生的 chunk 文件自定義命名。它支持以下形式：[format]：輸出（output）選項中定義的format的值，例如：es或cjs。[hash]：哈希值，由 chunk 文件本身的內容和所有它依賴的文件的內容共同組成。[name]：chunk 的名字。它可以通過output.manualChunks顯示設置，或者通過插件調用this.emitFile設置。如果沒有做任何設置，它將會根據 chunk 的內容來確定。
- output.entryFileNames 該選項用於指定 chunks 的入口文件名。預設值：
"[name].js"。
該選項用於指定 chunks 的入口文件名。支持以下形式：[format]：輸出（output）選項中定義的format的值，例如：es或cjs。[hash]：哈希值，由入口文件本身的內容和所有它依賴的文件的內容共同組成。[name]：入口文件的文件名（不包含擴展名），當入口文件（entry）定義為對象時，它的值時對象的鍵。
- output.assetFileNames 該選項用於自定義構建結果中的靜態文件名稱。預設值：
"assets/[name]-[hash][extname]"。
該選項用於自定義構建結果中的靜態文件名稱。它支持以下占位符：[extname]：包含點的靜態文件擴展名，例如：.css。[ext]：不包含點的文件擴展名，例如：css。[hash]：基於靜態文件的名稱和內容的哈希。[name]：靜態文件的名稱，不包含擴展名。
- output.manualChunks，該選項允許你創建自定義的公共模塊。可以是對象形式也可以是函數形式。函數第一個參數指向插件絕對路徑， 第二個參數包含getModuleInfo, getModuleIds
註意：
【 output.manualChunks】如果設置為
對象形式，使用的組件庫（插件）如果包含css,不會識別出來單獨存入一個文件，還是會放入公共index.css文件，函數形式則不然。
