原文地址：我的稀土掘金
默認打包：
所有檔案都放在了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檔案，函式形式則不然，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544135.html
標籤：其他