建構選項
除非另有說明，本節中的選項僅適用於建構。
build.target
- 型別：
string | string[] - 預設值：
'modules' - 相關： 瀏覽器相容性
最終捆綁包的瀏覽器相容性目標。預設值是 Vite 特殊值 'modules'，目標是支援 原生 ES 模組、原生 ESM 動態導入和 import.meta 的瀏覽器。Vite 會將 'modules' 替換為 ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']
另一個特殊值是 'esnext' - 它假設原生動態導入支援，並且只會執行最少的轉譯。
轉換是使用 esbuild 執行的，該值應該是有效的 esbuild 目標選項。自訂目標可以是 ES 版本 (例如 es2015)、帶有版本的瀏覽器 (例如 chrome58)，或多個目標字串的陣列。
請注意，如果程式碼包含 esbuild 無法安全轉譯的功能，建構將會失敗。有關詳細資訊，請參閱 esbuild 文件。
build.modulePreload
- 型別：
boolean | { polyfill?: boolean, resolveDependencies?: ResolveModulePreloadDependenciesFn } - 預設值：
{ polyfill: true }
預設情況下，會自動注入 模組預先載入 polyfill。polyfill 會自動注入每個 index.html 條目的 proxy 模組中。如果建構設定為透過 build.rollupOptions.input 使用非 HTML 自訂條目，則必須在您的自訂條目中手動導入 polyfill
import 'vite/modulepreload-polyfill'注意：polyfill 不適用於 函式庫模式。如果您需要支援沒有原生動態導入的瀏覽器，您應該避免在您的函式庫中使用它。
可以使用 { polyfill: false } 停用 polyfill。
每個動態導入要預先載入的區塊清單由 Vite 計算。預設情況下，載入這些相依性時將使用包含 base 的絕對路徑。如果 base 是相對的 ('' 或 './')，則會在執行時使用 import.meta.url 來避免依賴於最終部署 base 的絕對路徑。
使用 resolveDependencies 函式可實驗性支援對相依性清單及其路徑進行精細控制。 提供意見回饋。它需要一個 ResolveModulePreloadDependenciesFn 型別的函式
type ResolveModulePreloadDependenciesFn = (
url: string,
deps: string[],
context: {
hostId: string
hostType: 'html' | 'js'
},
) => string[]resolveDependencies 函式將針對每個動態導入及其相依的區塊清單呼叫，並且也會針對在條目 HTML 檔案中導入的每個區塊呼叫。可以傳回一個新的相依性陣列，其中包含已篩選或注入的更多相依性，並修改它們的路徑。deps 路徑是相對於 build.outDir 的。傳回值應該是相對於 build.outDir 的相對路徑。
modulePreload: {
resolveDependencies: (filename, deps, { hostId, hostType }) => {
return deps.filter(condition)
},
},
可以使用 experimental.renderBuiltUrl 進一步修改已解析的相依性路徑。
build.polyfillModulePreload
- 型別：
boolean - 預設值：
true - 已棄用 請改用
build.modulePreload.polyfill
是否自動注入 模組預先載入 polyfill。
build.outDir
- 型別：
string - 預設值：
dist
指定輸出目錄（相對於專案根目錄）。
build.assetsDir
- 型別：
string - 預設值：
assets
指定要將產生的資源巢狀於下的目錄（相對於 build.outDir。這不會在 函式庫模式 中使用）。
build.assetsInlineLimit
- 型別：
number|((filePath: string, content: Buffer) => boolean | undefined) - 預設值：
4096(4 KiB)
小於此閾值的已導入或引用的資源將會內聯為 base64 URL，以避免額外的 http 請求。設定為 0 可完全停用內聯。
如果傳遞了回呼，則可以傳回布林值來選擇加入或選擇退出。如果沒有傳回任何內容，則會套用預設邏輯。
Git LFS 佔位符會自動從內聯中排除，因為它們不包含它們所代表檔案的內容。
注意
如果您指定 build.lib，則會忽略 build.assetsInlineLimit，並且無論檔案大小或是否為 Git LFS 佔位符，資源都將始終內聯。
build.cssCodeSplit
- 型別：
boolean - 預設值：
true
啟用/停用 CSS 程式碼分割。啟用後，在非同步 JS 區塊中導入的 CSS 將會保留為區塊，並在提取區塊時一起提取。
如果停用，整個專案中的所有 CSS 將會提取到單個 CSS 檔案中。
注意
如果您指定 build.lib，則 build.cssCodeSplit 的預設值為 false。
build.cssTarget
- 型別：
string | string[] - 預設值： 與
build.target相同
此選項允許使用者為 CSS 最小化設定與用於 JavaScript 轉譯的不同的瀏覽器目標。
只有在您以非主流瀏覽器為目標時才應該使用它。一個例子是 Android WeChat WebView，它支援大多數現代 JavaScript 功能，但不支援 CSS 中的 #RGBA 十六進位色彩表示法。在這種情況下，您需要將 build.cssTarget 設定為 chrome61，以防止 vite 將 rgba() 顏色轉換為 #RGBA 十六進位表示法。
build.cssMinify
- 型別：
boolean | 'esbuild' | 'lightningcss' - 預設值： 用於用戶端的與
build.minify相同，用於 SSR 的為'esbuild'
此選項允許使用者特別覆寫 CSS 最小化，而不是預設為 build.minify，因此您可以分別設定 JS 和 CSS 的最小化。Vite 預設使用 esbuild 來最小化 CSS。將選項設定為 'lightningcss' 以改用 Lightning CSS。如果選擇，可以使用 css.lightningcss 進行設定。
build.sourcemap
- 型別：
boolean | 'inline' | 'hidden' - 預設值：
false
產生生產來源對應。如果為 true，則會建立單獨的來源對應檔案。如果為 'inline'，來源對應將會以 data URI 的形式附加到結果輸出檔案。'hidden' 的工作方式與 true 相同，只是會抑制捆綁檔案中對應的來源對應註解。
build.rollupOptions
- 型別：
RollupOptions
直接自訂底層的 Rollup 捆綁包。這與可以從 Rollup 設定檔匯出的選項相同，並且會與 Vite 的內部 Rollup 選項合併。有關詳細資訊，請參閱 Rollup 選項文件。
build.commonjsOptions
要傳遞給 @rollup/plugin-commonjs 的選項。
build.dynamicImportVarsOptions
要傳遞給 @rollup/plugin-dynamic-import-vars 的選項。
build.lib
- 型別：
{ entry: string | string[] | { [entryAlias: string]: string }, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat, entryName: string) => string), cssFileName?: string } - 相關： 函式庫模式
建構為函式庫。由於函式庫無法使用 HTML 作為條目，因此需要 entry。當 formats 包含 'umd' 或 'iife' 時，需要 name 是公開的全域變數。預設 formats 為 ['es', 'umd']，如果使用多個條目，則為 ['es', 'cjs']。
fileName 是套件檔案輸出的名稱，預設為 package.json 中的 "name"。它也可以定義為一個函式，它將 format 和 entryName 作為引數，並傳回檔案名稱。
如果您的套件導入 CSS，則可以使用 cssFileName 來指定 CSS 檔案輸出的名稱。如果它設定為字串，則預設為與 fileName 相同的值，否則它也會回復為 package.json 中的 "name"。
import { defineConfig } from 'vite'
export default defineConfig({
build: {
lib: {
entry: ['src/main.js'],
fileName: (format, entryName) => `my-lib-${entryName}.${format}.js`,
cssFileName: 'my-lib-style',
},
},
})build.manifest
- 型別：
boolean | string - 預設值：
false - 相關： 後端整合
設定為 true 時，建構也會產生一個 .vite/manifest.json 檔案，其中包含非雜湊資源檔案名稱到其雜湊版本的對應，然後伺服器框架可以使用該對應來轉譯正確的資源連結。當值為字串時，它將用作 manifest 檔案名稱。
build.ssrManifest
- 型別：
boolean | string - 預設值：
false - 相關： 伺服器端轉譯
當設定為 true 時，建置過程也會產生一個 SSR 清單，用於在生產環境中決定樣式連結和資源預載指令。當值為字串時，它將被用作清單檔案名稱。
build.ssr
- 型別：
boolean | string - 預設值：
false - 相關： 伺服器端轉譯
產生面向 SSR 的建置。該值可以是一個字串，直接指定 SSR 入口，或 true，這需要透過 rollupOptions.input 指定 SSR 入口。
build.emitAssets
- 型別：
boolean - 預設值：
false
在非客戶端建置期間，靜態資源不會被發出，因為假設它們會作為客戶端建置的一部分發出。此選項允許框架強制在其他環境建置中發出它們。框架有責任在建置後步驟中合併這些資源。
build.ssrEmitAssets
- 型別：
boolean - 預設值：
false
在 SSR 建置期間，靜態資源不會被發出，因為假設它們會作為客戶端建置的一部分發出。此選項允許框架強制在客戶端和 SSR 建置中都發出它們。框架有責任在建置後步驟中合併這些資源。一旦環境 API 穩定，此選項將被 build.emitAssets 取代。
build.minify
- 類型：
boolean | 'terser' | 'esbuild' - 預設值： 客戶端建置為
'esbuild'，SSR 建置為false
設定為 false 以停用壓縮，或指定要使用的壓縮器。預設值是 esbuild，它比 terser 快 20 ~ 40 倍，且壓縮效果只差 1 ~ 2%。 效能基準
請注意，當在 lib 模式中使用 'es' 格式時，build.minify 選項不會壓縮空白，因為它會移除純註解並破壞 tree-shaking。
當設定為 'terser' 時，必須安裝 Terser。
npm add -D terserbuild.terserOptions
- 類型：
TerserOptions
傳遞給 Terser 的額外 壓縮選項。
此外，您還可以傳遞 maxWorkers: number 選項來指定要產生的最大工作程序數。預設為 CPU 數量減 1。
build.write
- 型別：
boolean - 預設值：
true
設定為 false 以停用將 bundle 寫入磁碟。這主要用於程式化的 build() 呼叫，在寫入磁碟之前需要對 bundle 進行進一步的後處理。
build.emptyOutDir
- 型別：
boolean - 預設值：如果
outDir在root內部則為true
預設情況下，如果 outDir 在專案根目錄內，Vite 會在建置時清空它。如果 outDir 在根目錄外部，它會發出警告，以避免意外移除重要檔案。您可以明確設定此選項以抑制警告。這也可以透過命令列 --emptyOutDir 來使用。
build.copyPublicDir
- 型別：
boolean - 預設值：
true
預設情況下，Vite 會在建置時將檔案從 publicDir 複製到 outDir。設定為 false 以停用此功能。
build.reportCompressedSize
- 型別：
boolean - 預設值：
true
啟用/停用 gzip 壓縮大小報告。壓縮大型輸出檔案可能會很慢，因此停用此功能可能會提高大型專案的建置效能。
build.chunkSizeWarningLimit
- 類型：
number - 預設值：
500
區塊大小警告的限制（以 kB 為單位）。它是與未壓縮的區塊大小進行比較的，因為JavaScript 大小本身與執行時間有關。
build.watch
- 類型：
WatcherOptions| null - 預設值：
null
設定為 {} 以啟用 rollup watcher。這主要用於涉及僅建置外掛程式或整合流程的情況。
在 Windows Subsystem for Linux (WSL) 2 上使用 Vite
在某些情況下，檔案系統監看功能在 WSL2 上無法運作。請參閱server.watch 以取得更多詳細資訊。