Nuxt 配置
alias
您可以透過定義額外的別名來存取 JavaScript 和 CSS 內的自訂目錄,以改善您的 DX(開發者體驗)。
- 類型:
object
- 預設
{
"~": "/<srcDir>",
"@": "/<srcDir>",
"~~": "/<rootDir>",
"@@": "/<rootDir>",
"#shared": "/<rootDir>/shared",
"assets": "/<srcDir>/assets",
"public": "/<srcDir>/public",
"#build": "/<rootDir>/.nuxt",
"#internal/nuxt/paths": "/<rootDir>/.nuxt/paths.mjs"
}
~
來存取您的別名。.nuxt/tsconfig.json
,讓您可以獲得完整的類型支援和路徑自動完成功能。如果您需要進一步擴展 ./.nuxt/tsconfig.json
提供的選項,請務必在此處或 nuxt.config
中的 typescript.tsConfig
屬性內新增它們。範例:
export default {
alias: {
'images': fileURLToPath(new URL('./assets/images', import.meta.url)),
'style': fileURLToPath(new URL('./assets/style', import.meta.url)),
'data': fileURLToPath(new URL('./assets/other/data', import.meta.url))
}
}
analyzeDir
Nuxt 在執行 nuxt analyze
時將儲存產生檔案的目錄。
如果指定相對路徑,則它將相對於您的 rootDir
。
- 類型:
string
- 預設值:
"/<rootDir>/.nuxt/analyze"
app
Nuxt App 設定。
baseURL
您的 Nuxt 應用程式的基礎路徑。
例如
- 類型:
string
- 預設值:
"/"
範例:
export default defineNuxtConfig({
app: {
baseURL: '/prefix/'
}
})
範例:
NUXT_APP_BASE_URL=/prefix/ node .output/server/index.mjs
buildAssetsDir
已建置網站資源的資料夾名稱,相對於 baseURL
(或已設定的 cdnURL
)。這是在建置時設定的,不應在執行階段自訂。
- 類型:
string
- 預設值:
"/_nuxt/"
cdnURL
用於從中提供 public 資料夾的絕對 URL(僅限生產環境)。
例如
- 類型:
string
- 預設值:
""
範例:
export default defineNuxtConfig({
app: {
cdnURL: 'https://mycdn.org/'
}
})
範例:
NUXT_APP_CDN_URL=https://mycdn.org/ node .output/server/index.mjs
head
為每個頁面上的 <head>
設定預設設定。
- 類型:
object
- 預設
{
"meta": [
{
"name": "viewport",
"content": "width=device-width, initial-scale=1"
},
{
"charset": "utf-8"
}
],
"link": [],
"style": [],
"script": [],
"noscript": []
}
範例:
app: {
head: {
meta: [
// <meta name="viewport" content="width=device-width, initial-scale=1">
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
],
script: [
// <script src="https://myawesome-lib.js"></script>
{ src: 'https://awesome-lib.js' }
],
link: [
// <link rel="stylesheet" href="https://myawesome-lib.css">
{ rel: 'stylesheet', href: 'https://awesome-lib.css' }
],
// please note that this is an area that is likely to change
style: [
// <style type="text/css">:root { color: red }</style>
{ children: ':root { color: red }', type: 'text/css' }
],
noscript: [
// <noscript>JavaScript is required</noscript>
{ children: 'JavaScript is required' }
]
}
}
keepalive
頁面之間 KeepAlive 設定的預設值。
這可以使用個別頁面上的 definePageMeta
覆寫。僅允許 JSON 可序列化的值。
- 類型:
boolean
- 預設值:
false
參見: Vue KeepAlive
layoutTransition
版面配置轉換的預設值。
這可以使用個別頁面上的 definePageMeta
覆寫。僅允許 JSON 可序列化的值。
- 類型:
boolean
- 預設值:
false
pageTransition
頁面轉換的預設值。
這可以使用個別頁面上的 definePageMeta
覆寫。僅允許 JSON 可序列化的值。
- 類型:
boolean
- 預設值:
false
rootAttrs
自訂 Nuxt 根元素 ID。
- 類型:
object
- 預設
{
"id": "__nuxt"
}
rootId
自訂 Nuxt 根元素 ID。
- 類型:
string
- 預設值:
"__nuxt"
rootTag
自訂 Nuxt 根元素標籤。
- 類型:
string
- 預設值:
"div"
spaLoaderAttrs
自訂 Nuxt Nuxt SpaLoader 元素屬性。
id
- 類型:
string
- 預設值:
"__nuxt-loader"
spaLoaderTag
自訂 Nuxt SpaLoader 元素標籤。
- 類型:
string
- 預設值:
"div"
teleportAttrs
自訂 Nuxt Teleport 元素屬性。
- 類型:
object
- 預設
{
"id": "teleports"
}
teleportId
自訂 Nuxt Teleport 元素 ID。
- 類型:
string
- 預設值:
"teleports"
teleportTag
自訂 Nuxt Teleport 元素標籤。
- 類型:
string
- 預設值:
"div"
viewTransition
檢視轉換的預設值。
只有在 實驗性 支援檢視轉換 在您的 nuxt.config 檔案中啟用 時,這才會生效。這可以使用個別頁面上的 definePageMeta
覆寫。
- 類型:
boolean
- 預設值:
false
參見: Nuxt View Transition API 文件
appConfig
其他應用程式設定
為了程式化用法和類型支援,您可以直接使用此選項提供應用程式設定。它將與 app.config
檔案合併為預設值。
nuxt
appId
對於多應用程式專案,Nuxt 應用程式的唯一 ID。
預設為 nuxt-app
。
- 類型:
string
- 預設值:
"nuxt-app"
build
共用建置設定。
analyze
Nuxt 允許視覺化您的 bundle 以及如何最佳化它們。
設定為 true
以啟用 bundle 分析,或傳遞具有選項的物件:適用於 webpack 或 適用於 vite。
- 類型:
object
- 預設
{
"template": "treemap",
"projectRoot": "/<rootDir>",
"filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}
範例:
analyze: {
analyzerMode: 'static'
}
templates
建議使用 @nuxt/kit
中的 addTemplate
而非此選項。
- 類型:
array
範例:
templates: [
{
src: '~/modules/support/plugin.js', // `src` can be absolute or relative
dst: 'support.js', // `dst` is relative to project `.nuxt` dir
}
]
transpile
如果您想要使用 Babel 轉換特定的依賴項,您可以在此處新增它們。transpile 中的每個項目都可以是套件名稱、函數、字串或符合依賴項檔案名稱的 regex 物件。
您也可以使用函數來有條件地轉換。該函數將接收一個物件 ({ isDev, isServer, isClient, isModern, isLegacy })。
- 類型:
array
範例:
transpile: [({ isLegacy }) => isLegacy && 'ky']
buildDir
定義將放置已建置 Nuxt 檔案的目錄。
許多工具假設 .nuxt
是一個隱藏目錄(因為它以 .
開頭)。如果這是一個問題,您可以使用此選項來防止這種情況。
- 類型:
string
- 預設值:
"/<rootDir>/.nuxt"
範例:
export default {
buildDir: 'nuxt-build'
}
buildId
符合建置的唯一識別碼。這可能包含專案目前狀態的雜湊值。
- 類型:
string
- 預設值:
"f82392b2-46a9-44da-a2ea-53c8f00383c6"
builder
用於打包應用程式 Vue 部分的建構器。
- 類型:
string
- 預設值:
"@nuxt/vite-builder"
compatibilityDate
為您的應用程式指定相容性日期。
這用於控制 Nitro、Nuxt Image 和其他模組中預設的行為,這些模組可能會在沒有主要版本變更的情況下變更行為。我們計劃在未來改進此功能周圍的工具。
components
設定 Nuxt 元件自動註冊。
此處設定目錄中的任何元件都可以在您的頁面、版面配置(和其他元件)中使用,而無需明確匯入它們。
- 類型:
object
- 預設
{
"dirs": [
{
"path": "~/components/global",
"global": true
},
"~/components"
]
}
css
您可以定義想要全域設定(包含在每個頁面中)的 CSS 檔案/模組/函式庫。
Nuxt 會根據檔案副檔名自動判斷檔案類型,並使用適當的預處理器。如果您需要使用它們,仍然需要安裝必要的載入器。
- 類型:
array
範例:
css: [
// Load a Node.js module directly (here it's a Sass file).
'bulma',
// CSS file in the project
'~/assets/css/main.css',
// SCSS file in the project
'~/assets/css/main.scss'
]
debug
設定為 true
以啟用偵錯模式。
目前,它會在伺服器上印出 Hook 名稱和計時,並在瀏覽器中記錄 Hook 引數。您也可以將此設定為物件以啟用特定的偵錯選項。
- 類型:
boolean
- 預設值:
false
dev
Nuxt 是否在開發模式下執行。
通常,您不需要設定此項。
- 類型:
boolean
- 預設值:
false
devServer
cors
設定開發伺服器的 CORS 選項
origin
- 類型:
array
- 預設
[
{}
]
host
開發伺服器監聽主機
https
是否啟用 HTTPS。
- 類型:
boolean
- 預設值:
false
範例:
export default defineNuxtConfig({
devServer: {
https: {
key: './server.key',
cert: './server.crt'
}
}
})
loadingTemplate
顯示載入畫面的範本
- 類型:
function
port
開發伺服器監聽埠
- 類型:
number
- 預設值:
3000
url
監聽開發伺服器 URL。
此項不應直接設定,因為它總是會被開發伺服器以完整 URL 覆寫(用於模組和內部使用)。
- 類型:
string
- 預設值:
"https://127.0.0.1:3000"
devServerHandlers
Nitro 僅在開發環境中使用的伺服器處理程序。
- 類型:
array
devtools
啟用 Nuxt DevTools 以進行開發。
Devtools 的重大變更可能不會反映在 Nuxt 版本上。
參閱:Nuxt DevTools 以取得更多資訊。
dir
自訂 Nuxt 使用的預設目錄結構。
除非必要,否則最好堅持使用預設值。
app
- 類型:
string
- 預設值:
"app"
assets
assets 目錄(在您的建置中別名為 ~assets
)。
- 類型:
string
- 預設值:
"assets"
layouts
layouts 目錄,其中的每個檔案都會自動註冊為 Nuxt 版面配置。
- 類型:
string
- 預設值:
"layouts"
middleware
middleware 目錄,其中的每個檔案都會自動註冊為 Nuxt 中介層。
- 類型:
string
- 預設值:
"middleware"
modules
modules 目錄,其中的每個檔案都會自動註冊為 Nuxt 模組。
- 類型:
string
- 預設值:
"modules"
pages
將處理此目錄以自動產生您的應用程式頁面路由。
- 類型:
string
- 預設值:
"pages"
plugins
plugins 目錄,其中的每個檔案都會自動註冊為 Nuxt 外掛程式。
- 類型:
string
- 預設值:
"plugins"
public
包含您的靜態檔案的目錄,這些檔案將可直接透過 Nuxt 伺服器存取,並在產生應用程式時複製到您的 dist
資料夾中。
- 類型:
string
- 預設值:
"public"
shared
shared 目錄。此目錄在應用程式和伺服器之間共用。
- 類型:
string
- 預設值:
"shared"
static
- 類型:
string
- 預設值:
"public"
esbuild
options
設定 Nuxt 中使用的共用 esbuild 選項,並傳遞給其他建置工具,例如 Vite 或 Webpack。
jsxFactory
- 類型:
string
- 預設值:
"h"
jsxFragment
- 類型:
string
- 預設值:
"Fragment"
target
- 類型:
string
- 預設值:
"esnext"
tsconfigRaw
- 類型:
object
experimental
appManifest
使用應用程式資訊清單以在用戶端尊重路由規則。
- 類型:
boolean
- 預設值:
true
asyncContext
啟用原生 async context 以供巢狀 composable 存取
- 類型:
boolean
- 預設值:
false
asyncEntry
設定為 true 以為 Vue 套件產生非同步進入點(用於模組聯邦支援)。
- 類型:
boolean
- 預設值:
false
browserDevtoolsTiming
在基於 Chromium 的瀏覽器的效能面板中啟用 Nuxt 應用程式 Hook 的計時。
- 類型:
boolean
- 預設值:
false
buildCache
根據組態和原始檔的雜湊值快取 Nuxt/Nitro 建置產物。
這僅適用於應用程式的 Vue/Nitro 部分的 srcDir
和 serverDir
內的原始檔。
- 類型:
boolean
- 預設值:
false
checkOutdatedBuildInterval
設定檢查新組建的時間間隔(以毫秒為單位)。當 experimental.appManifest
為 false
時停用。
設定為 false
以停用。
- 類型:
number
- 預設值:
3600000
clientFallback
如果 SSR 中發生錯誤,是否啟用實驗性的 <NuxtClientFallback>
元件以在用戶端上呈現內容。
- 類型:
boolean
- 預設值:
false
clientNodeCompat
使用 unenv
自動填補用戶端組建中的 Node.js 匯入。
- 類型:
boolean
- 預設值:
false
參閱:unenv
compileTemplate
是否使用 lodash.template
來編譯 Nuxt 範本。
此旗標將在 v4 版本發佈時移除,並且僅適用於 Nuxt v3.12+ 或 nightly 發佈管道 中的進階測試。
- 類型:
boolean
- 預設值:
true
componentIslands
實驗性元件島嶼支援,具有 <NuxtIsland>
和 .island.vue
檔案。
預設情況下,它設定為 'auto',這表示僅當您的應用程式中存在島嶼、伺服器元件或伺服器頁面時才會啟用。
- 類型:
string
- 預設值:
"auto"
configSchema
組態架構支援
- 類型:
boolean
- 預設值:
true
cookieStore
啟用 CookieStore 支援以監聽 Cookie 更新(如果瀏覽器支援)並重新整理 useCookie
ref 值。
- 類型:
boolean
- 預設值:
true
參閱:CookieStore
crossOriginPrefetch
使用 Speculation Rules API 啟用跨來源預先擷取。
- 類型:
boolean
- 預設值:
false
debugModuleMutation
記錄模組環境中對 nuxt.options
的變更
- 類型:
boolean
- 預設值:
false
decorators
啟用以在 Nuxt 和 Nitro 中使用實驗性裝飾器。
- 類型:
boolean
- 預設值:
false
參閱:https://github.com/tc39/proposal-decorators
defaults
這允許為核心 Nuxt 元件和 composable 指定預設選項。
這些選項未來可能會移至其他位置,例如移至 app.config
或 app/
目錄中。
nuxtLink
componentName
- 類型:
string
- 預設值:
"NuxtLink"
prefetch
- 類型:
boolean
- 預設值:
true
prefetchOn
visibility
- 類型:
boolean
- 預設值:
true
useAsyncData
適用於 useAsyncData
(以及因此 useFetch
)的選項
deep
- 類型:
boolean
- 預設值:
true
errorValue
- 類型:
string
- 預設值:
"null"
value
- 類型:
string
- 預設值:
"null"
useFetch
emitRouteChunkError
當載入 vite/webpack 區塊時發生錯誤時,發出 app:chunkError
Hook。
預設情況下,當導航到新路由時,如果區塊載入失敗(automatic
),Nuxt 也會執行新路由的重新載入。設定 automatic-immediate
將導致 Nuxt 在區塊載入失敗時立即執行目前路由的重新載入(而不是等待導航)。您可以將此設定為 false
以停用自動處理,或將其設定為 manual
以手動處理區塊錯誤。
- 類型:
string
- 預設值:
"automatic"
externalVue
在建置時外部化 vue
、@vue/*
和 vue-router
。
- 類型:
boolean
- 預設值:
true
extraPageMetaExtractionKeys
設定在使用 scanPageMeta
時要從頁面元資料中提取的其他金鑰。
這允許模組從頁面元資料存取其他元資料。建議您使用您的金鑰擴增 NuxtPage 類型。
- 類型:
array
headNext
使用新的實驗性 head 優化
- 新增 capo.js head 外掛程式,以便以更高效能的方式呈現 head 中的標籤。- 使用雜湊水合外掛程式來減少初始水合
- 類型:
boolean
- 預設值:
true
inlineRouteRules
允許直接在您的 ~/pages
目錄中使用 defineRouteRules
定義 routeRules
。
規則會轉換(根據路徑)並應用於伺服器請求。例如,在 ~/pages/foo/bar.vue
中定義的規則將應用於 /foo/bar
請求。~/pages/foo/[id].vue
中的規則將應用於 /foo/**
請求。為了獲得更多控制權,例如,如果您使用在頁面的 definePageMeta
中設定的自訂 path
或 alias
,您應該直接在您的 nuxt.config
中設定 routeRules
。
- 類型:
boolean
- 預設值:
false
lazyHydration
啟用 <Lazy>
元件的水合策略自動組態。
- 類型:
boolean
- 預設值:
true
localLayerAliases
解析位於圖層中的 ~
、~~
、@
和 @@
別名,相對於其圖層來源和根目錄。
- 類型:
boolean
- 預設值:
true
navigationRepaint
在導航前等待單一動畫影格,這讓瀏覽器有機會重新繪製,確認使用者互動。
它可以在預先呈現的路由上導航時減少 INP。
- 類型:
boolean
- 預設值:
true
noVueServer
在 nitro 中停用 vue 伺服器渲染器端點。
- 類型:
boolean
- 預設值:
false
normalizeComponentNames
確保自動產生的 Vue 元件名稱與您將用於自動匯入元件的完整元件名稱相符。
- 類型:
boolean
- 預設值:
false
payloadExtraction
當啟用此選項(預設情況下)時,會提取預先呈現的頁面的有效負載
- 類型:
boolean
- 預設值:
true
polyfillVueUseHead
是否為依賴舊版 @vueuse/head
API 的模組、外掛程式或使用者程式碼新增相容性層。
停用此功能是為了將用戶端套件縮減約 0.5kb。
- 類型:
boolean
- 預設值:
false
relativeWatchPaths
是否在 builder:watch
Hook 中提供相對路徑。
此旗標將在 v4 版本發佈時移除,並且僅適用於 Nuxt v3.12+ 或 nightly 發佈管道 中的進階測試。
- 類型:
boolean
- 預設值:
true
renderJsonPayloads
呈現 JSON 有效負載,支援重新激活複雜類型。
- 類型:
boolean
- 預設值:
true
resetAsyncDataToUndefined
clear
和 clearNuxtData
是否應將非同步資料重設為其預設值,或將其更新為 null
/undefined
。
- 類型:
boolean
- 預設值:
true
respectNoSSRHeader
允許透過設定 x-nuxt-no-ssr
標頭來停用 Nuxt SSR 回應。
- 類型:
boolean
- 預設值:
false
restoreState
在區塊錯誤或手動 reloadNuxtApp()
呼叫後重新載入頁面時,是否從 sessionStorage
還原 Nuxt 應用程式狀態。
為了避免水合錯誤,它將僅在 Vue 應用程式掛載後應用,這表示初始載入時可能會出現閃爍。在啟用此功能之前請仔細考慮,因為它可能會導致非預期的行為,並考慮為 useState
提供明確的金鑰,因為自動產生的金鑰可能在不同組建之間不符。
- 類型:
boolean
- 預設值:
false
scanPageMeta
允許在組建時向模組公開在 definePageMeta
中定義的一些路由元資料(別名、名稱、路徑、重新導向)。
這僅適用於靜態或字串/陣列,而不是變數或條件指派。
- 類型:
boolean
- 預設值:
true
sharedPrerenderData
自動共用預先呈現的頁面之間的有效負載資料。當預先呈現使用 useAsyncData
或 useFetch
且在不同頁面中擷取相同資料的網站時,這可以顯著提升效能。
當啟用此功能時,尤其重要的是確保資料的任何唯一金鑰始終可解析為相同的資料。例如,如果您使用 useAsyncData
來擷取與特定頁面相關的資料,您應該提供唯一符合該資料的金鑰。(useFetch
應該會自動為您執行此操作。)
- 類型:
boolean
- 預設值:
false
範例:
// This would be unsafe in a dynamic page (e.g. `[slug].vue`) because the route slug makes a difference
// to the data fetched, but Nuxt can't know that because it's not reflected in the key.
const route = useRoute()
const { data } = await useAsyncData(async () => {
return await $fetch(`/api/my-page/${route.params.slug}`)
})
// Instead, you should use a key that uniquely identifies the data fetched.
const { data } = await useAsyncData(route.params.slug, async () => {
return await $fetch(`/api/my-page/${route.params.slug}`)
})
spaLoadingTemplateLocation
持續顯示 spa-loading-template 直到 suspense:resolve
- 類型:
string
- 預設值:
"within"
templateImportResolution
停用從新增範本的模組路徑解析匯入到 Nuxt 範本中。
- 類型:
boolean
- 預設值:
true
templateRouteInjection
預設情況下,自動匯入的 useRoute()
composable 傳回的路由物件會與 <NuxtPage>
中檢視的目前頁面保持同步。對於 vue-router
匯出的 useRoute
或 Vue 範本中可用的預設 $route
物件,情況並非如此。
透過啟用此選項,將注入一個 mixin 以保持 $route
範本物件與 Nuxt 管理的 useRoute()
同步。
- 類型:
boolean
- 預設值:
true
templateUtils
在編譯 Nuxt 範本時,是否提供舊版 templateUtils
物件(具有 serialize
、importName
和 importSources
)。
此旗標將在 v4 版本發佈時移除,並且僅適用於 Nuxt v3.12+ 或 nightly 發佈管道 中的進階測試。
- 類型:
boolean
- 預設值:
true
treeshakeClientOnly
從伺服器套件中移除僅限用戶端元件的未使用程式碼。
- 類型:
boolean
- 預設值:
true
typedPages
使用 unplugin-vue-router 啟用新的實驗性類型化路由器。
- 類型:
boolean
- 預設值:
false
viewTransition
啟用 View Transition API 與用戶端路由器的整合。
- 類型:
boolean
- 預設值:
false
watcher
設定將用作 Nuxt 監看服務的替代監看器。
如果您的原始目錄與根目錄相同,Nuxt 會使用 'chokidar-granular'。這將忽略從監看中排除的頂層目錄(例如 node_modules
和 .git
)。您可以改為將其設定為 parcel
以使用 @parcel/watcher
,這可能會提高大型專案或 Windows 平台上的效能。您也可以將其設定為 chokidar
以監看原始目錄中的所有檔案。
- 類型:
string
- 預設值:
"chokidar"
參閱:chokidar
writeEarlyHints
在使用 node 伺服器時寫入 Early Hints。
- 類型:
boolean
- 預設值:
false
extends
從多個本機或遠端來源擴充專案。
值應為字串或字串陣列,指向相對於目前組態的來源目錄或組態路徑。您可以使用 github:
、gh:
gitlab:
或 bitbucket:
參閱:giget
文件
extensions
Nuxt 解析器應解析的副檔名。
- 類型:
array
- 預設
[
".js",
".jsx",
".mjs",
".ts",
".tsx",
".vue"
]
features
Nuxt 的某些功能可選擇加入,或可根據您的需求停用。
devLogs
在您開發時將伺服器日誌串流到用戶端。這些日誌可以在 dev:ssr-logs
Hook 中處理。
如果設定為 silent
,則日誌將不會列印到瀏覽器主控台。
- 類型:
boolean
- 預設值:
false
inlineStyles
在呈現 HTML 時內嵌樣式(目前僅限 vite)。
您也可以傳遞一個函式,該函式接收 Vue 元件的路徑,並傳回一個布林值,指示是否內嵌該元件的樣式。
- 類型:
boolean
- 預設值:
true
noScripts
關閉 Nuxt 指令碼和 JS 資源提示的呈現。您也可以在 routeRules
中更精細地停用指令碼。
- 類型:
boolean
- 預設值:
false
future
future
用於早期加入將在框架的未來(可能主要)版本中成為預設值的新功能。
compatibilityVersion
啟用早期存取 Nuxt v4 功能或旗標。
將 compatibilityVersion
設定為 4
會變更整個 Nuxt 組態中的預設值,但您可以在測試時精細地重新啟用 Nuxt v3 行為(請參閱範例)。如果這樣做,請提交問題,以便我們可以在 Nuxt 或生態系統中解決。
- 類型:
number
- 預設值:
3
範例:
export default defineNuxtConfig({
future: {
compatibilityVersion: 4,
},
// To re-enable _all_ Nuxt v3 behaviour, set the following options:
srcDir: '.',
dir: {
app: 'app'
},
experimental: {
compileTemplate: true,
templateUtils: true,
relativeWatchPaths: true,
resetAsyncDataToUndefined: true,
defaults: {
useAsyncData: {
deep: true
}
}
},
unhead: {
renderSSRHeadOptions: {
omitLineBreaks: false
}
}
})
multiApp
這啟用早期存取實驗性的多應用程式支援。
- 類型:
boolean
- 預設值:
false
typescriptBundlerResolution
這為 TypeScript 啟用 'Bundler' 模組解析模式,這是 Nuxt 和 Vite 等框架的建議設定。
當使用具有 exports
的現代函式庫時,它可以改善類型支援。您可以將其設定為 false 以使用舊版 'Node' 模式,這是 TypeScript 的預設值。
- 類型:
boolean
- 預設值:
true
參閱:TypeScript PR 實作 bundler
模組解析
generate
exclude
此選項不再使用。請改用 nitro.prerender.ignore
。
- 類型:
array
routes
要產生的路由。
如果您使用爬蟲程式,這將僅是路由產生的起點。這在使用動態路由時通常是必要的。建議使用 nitro.prerender.routes
。
- 類型:
array
範例:
routes: ['/users/1', '/users/2', '/users/3']
hooks
Hook 是 Nuxt 事件的監聽器,通常在模組中使用,但也可用於 nuxt.config
。
在內部,Hook 遵循使用冒號的命名模式(例如,build:done)。為了方便組態,您也可以在 nuxt.config
中將它們結構化為階層式物件(如下所示)。
範例:
import fs from 'node:fs'
import path from 'node:path'
export default {
hooks: {
build: {
done(builder) {
const extraFilePath = path.join(
builder.nuxt.options.buildDir,
'extra-file'
)
fs.writeFileSync(extraFilePath, 'Something extra')
}
}
}
}
ignore
比 ignorePrefix
更可自訂:所有符合 ignore
陣列中指定 glob 模式的檔案都將在建置中忽略。
- 類型:
array
- 預設
[
"**/*.stories.{js,cts,mts,ts,jsx,tsx}",
"**/*.{spec,test}.{js,cts,mts,ts,jsx,tsx}",
"**/*.d.{cts,mts,ts}",
"**/.{pnpm-store,vercel,netlify,output,git,cache,data}",
"**/*.sock",
".nuxt/analyze",
".nuxt",
"**/-*.*"
]
ignoreOptions
直接將選項傳遞給 node-ignore
(Nuxt 使用它來忽略檔案)。
參閱:node-ignore
範例:
ignoreOptions: {
ignorecase: false
}
ignorePrefix
如果 pages/
、layouts/
、middleware/
和 public/
目錄中的任何檔案的檔名以 ignorePrefix
指定的前綴開頭,則在建置過程中將會忽略這些檔案。這旨在防止在已建置的應用程式中處理或提供某些檔案。預設情況下,ignorePrefix
設定為 '-',忽略任何以 '-' 開頭的檔案。
- 類型:
string
- 預設值:
"-"
imports
設定 Nuxt 如何將 composable 自動匯入您的應用程式。
參閱:Nuxt 文件
dirs
將自動匯入的自訂目錄陣列。請注意,此選項不會覆寫預設目錄(~/composables、~/utils)。
- 類型:
array
範例:
imports: {
// Auto-import pinia stores defined in `~/stores`
dirs: ['stores']
}
global
- 類型:
boolean
- 預設值:
false
scan
是否掃描您的 composables/
和 utils/
目錄以自動匯入 composable。Nuxt 或其他模組註冊的自動匯入,例如來自 vue
或 nuxt
的匯入,仍將啟用。
- 類型:
boolean
- 預設值:
true
logLevel
建置日誌時的日誌層級。
在 CI 中執行或 TTY 不可用時,預設為 'silent'。然後,此選項在 Vite 中用作 'silent',在 Webpack 中用作 'none'
- 類型:
string
- 預設值:
"info"
modules
模組是 Nuxt 擴充功能,可以擴充其核心功能並新增無盡的整合。
每個模組可以是字串(可以參考套件,或作為檔案的路徑)、元組(模組作為第一個字串,選項作為第二個物件),或內聯模組函式。Nuxt 嘗試使用 node require 路徑(在 node_modules
中)解析模組陣列中的每個項目,然後如果使用 ~
別名,則將從專案 srcDir
解析。
- 類型:
array
nuxt.config.ts
中定義的模組。然後,執行在 modules/
目錄中找到的模組,它們按字母順序載入。範例:
modules: [
// Using package name
'@nuxtjs/axios',
// Relative to your project srcDir
'~/modules/awesome.js',
// Providing options
['@nuxtjs/google-analytics', { ua: 'X1234567' }],
// Inline definition
function () {}
]
modulesDir
用於設定路徑解析的模組目錄(例如,webpack 的 resolveLoading
、nodeExternals
和 postcss
)。
組態路徑相對於 options.rootDir
(預設為目前工作目錄)。如果您的專案組織為 yarn workspace 樣式的單一儲存庫,則可能需要設定此欄位。
- 類型:
array
- 預設
[
"/<rootDir>/node_modules"
]
範例:
export default {
modulesDir: ['../../node_modules']
}
nitro
Nitro 的組態。
參閱:Nitro 組態文件
routeRules
- 類型:
object
runtimeConfig
- 類型:
object
- 預設
{
"public": {},
"app": {
"buildId": "f82392b2-46a9-44da-a2ea-53c8f00383c6",
"baseURL": "/",
"buildAssetsDir": "/_nuxt/",
"cdnURL": ""
},
"nitro": {
"envPrefix": "NUXT_"
}
}
optimization
建置時間最佳化組態。
asyncTransforms
直接傳遞給來自 unctx
的轉換器的選項,該轉換器在 await
之後保留非同步環境。
asyncFunctions
- 類型:
array
- 預設
[
"defineNuxtPlugin",
"defineNuxtRouteMiddleware"
]
objectDefinitions
defineNuxtComponent
- 類型:
array
- 預設
[
"asyncData",
"setup"
]
defineNuxtPlugin
- 類型:
array
- 預設
[
"setup"
]
definePageMeta
- 類型:
array
- 預設
[
"middleware",
"validate"
]
keyedComposables
要注入金鑰的函式。
只要傳遞給函式的引數數量少於 argumentLength
,就會注入一個額外的魔術字串,可用於消除伺服器和用戶端之間的請求重複資料。您需要採取步驟來處理這個額外的金鑰。金鑰將根據檔案中調用函式的位置而唯一。
- 類型:
array
- 預設
[
{
"name": "callOnce",
"argumentLength": 3
},
{
"name": "defineNuxtComponent",
"argumentLength": 2
},
{
"name": "useState",
"argumentLength": 2
},
{
"name": "useFetch",
"argumentLength": 3
},
{
"name": "useAsyncData",
"argumentLength": 3
},
{
"name": "useLazyAsyncData",
"argumentLength": 3
},
{
"name": "useLazyFetch",
"argumentLength": 3
}
]
treeShake
從特定組建中移除未使用程式碼。
composables
從伺服器或用戶端組建中移除 composable 的未使用程式碼。
範例:
treeShake: { client: { myPackage: ['useServerOnlyComposable'] } }
client
- 類型:
object
- 預設
{
"vue": [
"onRenderTracked",
"onRenderTriggered",
"onServerPrefetch"
],
"#app": [
"definePayloadReducer",
"definePageMeta",
"onPrehydrate"
]
}
server
- 類型:
object
- 預設
{
"vue": [
"onMounted",
"onUpdated",
"onUnmounted",
"onBeforeMount",
"onBeforeUpdate",
"onBeforeUnmount",
"onRenderTracked",
"onRenderTriggered",
"onActivated",
"onDeactivated"
],
"#app": [
"definePayloadReviver",
"definePageMeta"
]
}
pages
是否在 Nuxt 3 中使用 vue-router 整合。如果您未提供值,如果您在來源資料夾中具有 pages/
目錄,則將啟用它。
plugins
Nuxt 應用程式外掛程式陣列。
每個外掛程式可以是字串(可以是檔案的絕對或相對路徑)。如果它以 .client
或 .server
結尾,則會自動僅在適當的環境中載入。它也可以是具有 src
和 mode
金鑰的物件。
- 類型:
array
~/plugins
目錄自動註冊,並且這些外掛程式不需要在 nuxt.config
中列出,除非您需要自訂它們的順序。所有外掛程式都依其 src 路徑消除重複資料。範例:
plugins: [
'~/plugins/foo.client.js', // only in client side
'~/plugins/bar.server.js', // only in server side
'~/plugins/baz.js', // both client & server
{ src: '~/plugins/both-sides.js' },
{ src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
{ src: '~/plugins/server-only.js', mode: 'server' } // only on server side
]
postcss
order
PostCSS 外掛程式的排序策略。
- 類型:
function
plugins
用於設定 PostCSS 外掛程式的選項。
參閱:PostCSS 文件
autoprefixer
用於解析 CSS 並將供應商前綴新增至 CSS 規則的外掛程式。
參閱:autoprefixer
cssnano
- 類型:
object
參閱:cssnano
組態選項
rootDir
定義應用程式的根目錄。
此屬性可以被覆寫(例如,執行 nuxt ./my-app/
會將 rootDir
設定為目前/工作目錄中 ./my-app/
的絕對路徑。通常不需要設定此選項。
- 類型:
string
- 預設值:
"/<rootDir>"
routeRules
套用於符合伺服器路由的全域路由選項。
實驗性:這是一項實驗性功能,API 未來可能會變更。
參閱:Nitro 路由規則文件
router
options
傳遞至 vue-router
的其他路由器選項。除了 vue-router
的選項之外,Nuxt 還提供其他選項來自訂路由器(請參閱下文)。
app/router.options.ts
檔案。參閱:Vue Router 文件。
hashMode
您可以在 SPA 模式中啟用雜湊歷史記錄。在此模式下,路由器在內部傳遞的實際 URL 之前使用雜湊字元 (#)。啟用後,URL 永遠不會傳送到伺服器,並且不支援 SSR。
- 類型:
boolean
- 預設值:
false
預設值:false
scrollBehaviorType
自訂雜湊連結的捲動行為。
- 類型:
string
- 預設值:
"auto"
預設值:'auto'
runtimeConfig
執行階段組態允許將動態組態和環境變數傳遞到 Nuxt 應用程式環境。
此物件的值只能從伺服器端使用 useRuntimeConfig
存取。它主要應保留私有組態,該組態不會在前端公開。這可能包括對您的 API 秘密權杖的參考。public
和 app
下的任何內容也將公開給前端。值會在執行階段自動由相符的環境變數取代,例如,設定環境變數 NUXT_API_KEY=my-api-key NUXT_PUBLIC_BASE_URL=/foo/
將覆寫以下範例中的兩個值。
- 類型:
object
- 預設
{
"public": {},
"app": {
"buildId": "f82392b2-46a9-44da-a2ea-53c8f00383c6",
"baseURL": "/",
"buildAssetsDir": "/_nuxt/",
"cdnURL": ""
}
}
範例:
export default {
runtimeConfig: {
apiKey: '', // Default to an empty string, automatically set at runtime using process.env.NUXT_API_KEY
public: {
baseURL: '' // Exposed to the frontend as well.
}
}
}
serverDir
定義 Nuxt 應用程式的伺服器目錄,其中保留 Nitro 路由、中介層和外掛程式。
如果指定相對路徑,則它將相對於您的 rootDir
。
- 類型:
string
- 預設值:
"/<srcDir>/server"
serverHandlers
Nitro 伺服器處理程序。
每個處理程序都接受以下選項
- handler:定義處理程序的檔案路徑。- route:處理程序可用的路由。這遵循 rou3 的慣例。- method:應處理的請求的 HTTP 方法。- middleware:指定它是否為中介層處理程序。- lazy:指定是否使用延遲載入來匯入處理程序。
- 類型:
array
參閱:server/
目錄文件
server/api
、server/middleware
和 server/routes
的檔案。範例:
serverHandlers: [
{ route: '/path/foo/**:name', handler: '~/server/foohandler.ts' }
]
sourcemap
設定是否以及如何為伺服器和/或用戶端套件產生來源地圖。
如果設定為單一布林值,則該值同時適用於伺服器和用戶端。此外,'hidden'
選項也可用於伺服器和用戶端。用戶端和伺服器的可用選項:- true
:產生來源地圖,並在最終套件中包含來源參考。- false
:不產生任何來源地圖。- 'hidden'
:產生來源地圖,但不在最終套件中包含參考。
- 類型:
object
- 預設
{
"server": true,
"client": false
}
spaLoadingTemplate
布林值或 HTML 檔案的路徑,其內容將插入使用 ssr: false
呈現的任何 HTML 頁面中。
- 如果未設定,它將在您的其中一個圖層中使用
~/app/spa-loading-template.html
檔案(如果存在)。- 如果為 false,則不會載入 SPA 載入指示器。- 如果為 true,Nuxt 將在您的其中一個圖層中尋找~/app/spa-loading-template.html
檔案,否則將使用預設 Nuxt 影像。一些好的 spinner 來源是 SpinKit 或 SVG Spinners。 - 預設值:
null
範例:~/app/spa-loading-template.html
<!-- https://github.com/barelyhuman/snips/blob/dev/pages/css-loader.md -->
<div class="loader"></div>
<style>
.loader {
display: block;
position: fixed;
z-index: 1031;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #000;
border-left-color: #000;
border-bottom-color: #efefef;
border-right-color: #efefef;
border-radius: 50%;
-webkit-animation: loader 400ms linear infinite;
animation: loader 400ms linear infinite;
}
@-webkit-keyframes loader {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes loader {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
srcDir
定義 Nuxt 應用程式的原始目錄。
如果指定相對路徑,則它將相對於 rootDir
。
- 類型:
string
- 預設值:
"/<srcDir>"
範例:
export default {
srcDir: 'src/'
}
這將適用於以下資料夾結構
-| app/
---| node_modules/
---| nuxt.config.js
---| package.json
---| src/
------| assets/
------| components/
------| layouts/
------| middleware/
------| pages/
------| plugins/
------| public/
------| store/
------| server/
------| app.config.ts
------| app.vue
------| error.vue
ssr
是否啟用 HTML 呈現 - 動態呈現(在伺服器模式下)或在產生時呈現。如果設定為 false
,則產生的頁面將沒有內容。
- 類型:
boolean
- 預設值:
true
telemetry
手動停用 nuxt 遙測。
參閱:Nuxt Telemetry 以取得更多資訊。
test
您的應用程式是否正在進行單元測試。
- 類型:
boolean
- 預設值:
false
theme
從本機或遠端來源擴充專案。
值應為字串,指向相對於目前組態的來源目錄或組態路徑。您可以使用 github:
、gitlab:
、bitbucket:
或 https://
從遠端 git 儲存庫擴充。
- 類型:
string
typescript
Nuxt 的 TypeScript 整合組態。
builder
要為您的專案包含哪些建置器類型。
預設情況下,Nuxt 會根據您的 builder
選項(預設為 'vite')推斷此值,但您可以關閉建置器環境類型(使用 false
)以完全自行處理此問題,或選擇 'shared' 選項。建議模組作者使用 'shared' 選項,他們將需要支援多個可能的建置器。
- 預設值:
null
hoist
要在 compilerOptions.paths
中為其產生深層別名的模組。這尚不支援子路徑。當在具有 shamefully-hoist=false
的 pnpm monorepo 中使用 Nuxt 時,這可能是必要的。
- 類型:
array
- 預設
[
"nitropack/types",
"nitropack/runtime",
"nitropack",
"defu",
"h3",
"consola",
"ofetch",
"@unhead/vue",
"@nuxt/devtools",
"vue",
"@vue/runtime-core",
"@vue/compiler-sfc",
"vue-router",
"vue-router/auto-routes",
"unplugin-vue-router/client",
"@nuxt/schema",
"nuxt"
]
includeWorkspace
在 Nuxt 專案中包含父工作區。主要適用於主題和模組作者。
- 類型:
boolean
- 預設值:
false
shim
產生 *.vue
shim。
我們建議改為讓官方 Vue 擴充功能為您的元件產生精確的類型。請注意,如果您正在使用其他函式庫(例如 ESLint),這些函式庫無法理解 .vue
檔案的類型,您可能希望將此設定為 true
。
- 類型:
boolean
- 預設值:
false
strict
TypeScript 隨附某些檢查,可為您提供更高的安全性和程式分析。將程式碼庫轉換為 TypeScript 後,您可以開始啟用這些檢查以獲得更高的安全性。閱讀更多
- 類型:
boolean
- 預設值:
true
tsConfig
您可以使用此選項擴充產生的 .nuxt/tsconfig.json
。
typeCheck
啟用建置時類型檢查。
如果設為 true,這將在開發環境中進行類型檢查。您可以將其設定為 build
,以限制為建置時的類型檢查。需要安裝 typescript
和 vue-tsc
作為開發依賴項。
- 類型:
boolean
- 預設值:
false
unhead
一個物件,允許我們設定 unhead
nuxt 模組。
legacy(舊版)
啟用 unhead
模組的舊版相容模式。這會套用以下變更:- 停用 Capo.js 排序 - 新增 DeprecationsPlugin
:支援 hid
、vmid
、children
、body
- 新增 PromisesPlugin
:支援 promise 作為輸入
- 類型:
boolean
- 預設值:
false
參見: unhead
遷移文件
範例:
export default defineNuxtConfig({
unhead: {
legacy: true
})
renderSSRHeadOptions
一個將傳遞給 renderSSRHead
以自訂輸出的物件。
- 類型:
object
- 預設
{
"omitLineBreaks": false
}
範例:
export default defineNuxtConfig({
unhead: {
renderSSRHeadOptions: {
omitLineBreaks: true
}
})
vite
將直接傳遞給 Vite 的設定。
參見: Vite 設定文件 以取得更多資訊。請注意,並非所有 vite 選項都在 Nuxt 中受到支援。
build
assetsDir
- 類型:
string
- 預設值:
"_nuxt/"
emptyOutDir
- 類型:
boolean
- 預設值:
false
cacheDir
- 類型:
string
- 預設值:
"/<rootDir>/node_modules/.cache/vite"
clearScreen
- 類型:
boolean
- 預設值:
true
define
- 類型:
object
- 預設
{
"__VUE_PROD_HYDRATION_MISMATCH_DETAILS__": false,
"process.dev": false,
"import.meta.dev": false,
"process.test": false,
"import.meta.test": false
}
esbuild
- 類型:
object
- 預設
{
"target": "esnext",
"jsxFactory": "h",
"jsxFragment": "Fragment",
"tsconfigRaw": {}
}
mode
- 類型:
string
- 預設值:
"production"
optimizeDeps
esbuildOptions
- 類型:
object
- 預設
{
"target": "esnext",
"jsxFactory": "h",
"jsxFragment": "Fragment",
"tsconfigRaw": {}
}
exclude
- 類型:
array
- 預設
[
"vue-demi"
]
publicDir
resolve
extensions
- 類型:
array
- 預設
[
".mjs",
".js",
".ts",
".jsx",
".tsx",
".json",
".vue"
]
root
- 類型:
string
- 預設值:
"/<srcDir>"
server
fs
allow
- 類型:
array
- 預設
[
"/<rootDir>/.nuxt",
"/<srcDir>",
"/<rootDir>",
"/<workspaceDir>",
"/<rootDir>/node_modules"
]
vue
features
propsDestructure
- 類型:
boolean
- 預設值:
true
isProduction
- 類型:
boolean
- 預設值:
true
script
hoistStatic
template
compilerOptions
- 類型:
object
transformAssetUrls
- 類型:
object
- 預設
{
"video": [
"src",
"poster"
],
"source": [
"src"
],
"img": [
"src"
],
"image": [
"xlink:href",
"href"
],
"use": [
"xlink:href",
"href"
]
}
vueJsx
- 類型:
object
- 預設
{
"isCustomElement": {
"$schema": {
"title": "",
"description": "",
"tags": []
}
}
}
vue
Vue.js 設定
compilerOptions
將在建置時傳遞的 Vue 編譯器選項。
參見: Vue 文件
config
可以全域設定 Vue 應用程式。只有可序列化的選項可以在您的 nuxt.config
中設定。所有其他選項都應該在運行時在 Nuxt 外掛程式中設定。
參見: Vue 應用程式設定文件
propsDestructure
為 defineProps
啟用響應式解構
- 類型:
boolean
- 預設值:
true
runtimeCompiler
在運行時捆綁包中包含 Vue 編譯器。
- 類型:
boolean
- 預設值:
false
transformAssetUrls
image
- 類型:
array
- 預設
[
"xlink:href",
"href"
]
img
- 類型:
array
- 預設
[
"src"
]
source
- 類型:
array
- 預設
[
"src"
]
use
- 類型:
array
- 預設
[
"xlink:href",
"href"
]
video
- 類型:
array
- 預設
[
"src",
"poster"
]
watch
watch 屬性可讓您定義模式,這些模式會在變更時重新啟動 Nuxt 開發伺服器。
它是一個字串或正則表達式陣列。字串應該是絕對路徑或相對於 srcDir
(以及任何層的 srcDir
)的路徑。正則表達式將與相對於專案 srcDir
(以及任何層的 srcDir
)的路徑進行匹配。
- 類型:
array
watchers
watchers 屬性可讓您覆寫 nuxt.config
中的 watchers 設定。
chokidar
直接傳遞給 chokidar
的選項。
參見: chokidar
ignoreInitial
- 類型:
boolean
- 預設值:
true
ignorePermissionErrors
- 類型:
boolean
- 預設值:
true
rewatchOnRawEvents
事件類型陣列,當收到這些事件類型時,將導致 watcher 重新啟動。
webpack
直接傳遞給 webpack 的 watchOptions
。
參見: webpack@4 watch 選項。
aggregateTimeout
- 類型:
number
- 預設值:
1000
webpack
aggressiveCodeRemoval
硬取代 typeof process
、typeof window
和 typeof document
以進行 tree-shake 捆綁。
- 類型:
boolean
- 預設值:
false
analyze
Nuxt 使用 webpack-bundle-analyzer
來視覺化您的捆綁包以及如何最佳化它們。
設定為 true
以啟用 bundle 分析,或傳遞具有選項的物件:適用於 webpack 或 適用於 vite。
- 類型:
object
- 預設
{
"template": "treemap",
"projectRoot": "/<rootDir>",
"filename": "/<rootDir>/.nuxt/analyze/{name}.html"
}
範例:
analyze: {
analyzerMode: 'static'
}
cssSourceMap
啟用 CSS 原始碼地圖支援(在開發環境中預設為 true
)。
- 類型:
boolean
- 預設值:
false
devMiddleware
請參閱 webpack-dev-middleware 以取得可用的選項。
stats
- 類型:
string
- 預設值:
"none"
experiments
extractCSS
啟用 Common CSS Extraction。
在底層使用 mini-css-extract-plugin,您的 CSS 將被提取到單獨的檔案中,通常每個組件一個檔案。這允許單獨快取您的 CSS 和 JavaScript。
- 類型:
boolean
- 預設值:
true
範例:
export default {
webpack: {
extractCSS: true,
// or
extractCSS: {
ignoreOrder: true
}
}
}
範例:
export default {
webpack: {
extractCSS: true,
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.(css|vue)$/,
chunks: 'all',
enforce: true
}
}
}
}
}
}
filenames
自訂捆綁包檔案名稱。
要更深入了解 manifest 的使用,請查看 webpack 文件。
範例:
filenames: {
chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js')
}
app
- 類型:
function
chunk
- 類型:
function
css
- 類型:
function
font
- 類型:
function
img
- 類型:
function
video
- 類型:
function
friendlyErrors
設定為 false
以停用 FriendlyErrorsWebpackPlugin 提供的覆蓋層。
- 類型:
boolean
- 預設值:
true
hotMiddleware
請參閱 webpack-hot-middleware 以取得可用的選項。
loaders
自訂 Nuxt 整合的 webpack loader 的選項。
css
請參閱 css-loader 以取得可用的選項。
esModule
- 類型:
boolean
- 預設值:
false
importLoaders
- 類型:
number
- 預設值:
0
url
filter
- 類型:
function
cssModules
請參閱 css-loader 以取得可用的選項。
esModule
- 類型:
boolean
- 預設值:
false
importLoaders
- 類型:
number
- 預設值:
0
modules
localIdentName
- 類型:
string
- 預設值:
"[local]_[hash:base64:5]"
url
filter
- 類型:
function
esbuild
- 類型:
object
- 預設
{
"target": "esnext",
"jsxFactory": "h",
"jsxFragment": "Fragment",
"tsconfigRaw": {}
}
參見: esbuild loader
file
參見: file-loader
選項
預設:
{ esModule: false }
esModule
- 類型:
boolean
- 預設值:
false
limit
- 類型:
number
- 預設值:
1000
fontUrl
參見: file-loader
選項
預設:
{ esModule: false }
esModule
- 類型:
boolean
- 預設值:
false
limit
- 類型:
number
- 預設值:
1000
imgUrl
參見: file-loader
選項
預設:
{ esModule: false }
esModule
- 類型:
boolean
- 預設值:
false
limit
- 類型:
number
- 預設值:
1000
less
- 預設
{
"sourceMap": false
}
參見: less-loader
選項
pugPlain
參見: pug
選項
sass
參見: sass-loader
選項
預設:
{
sassOptions: {
indentedSyntax: true
}
}
sassOptions
indentedSyntax
- 類型:
boolean
- 預設值:
true
scss
- 預設
{
"sourceMap": false
}
參見: sass-loader
選項
stylus
- 預設
{
"sourceMap": false
}
參見: stylus-loader
選項
vue
請參閱 vue-loader 以取得可用的選項。
compilerOptions
- 類型:
object
propsDestructure
- 類型:
boolean
- 預設值:
true
transformAssetUrls
- 類型:
object
- 預設
{
"video": [
"src",
"poster"
],
"source": [
"src"
],
"img": [
"src"
],
"image": [
"xlink:href",
"href"
],
"use": [
"xlink:href",
"href"
]
}
vueStyle
- 預設
{
"sourceMap": false
}
optimization
minimize
將 minimize 設定為 false
以停用所有 minimizer。(在開發環境中預設為停用)。
- 類型:
boolean
- 預設值:
true
minimizer
您可以將 minimizer 設定為自訂的外掛程式陣列。
runtimeChunk
- 類型:
string
- 預設值:
"single"
splitChunks
automaticNameDelimiter
- 類型:
string
- 預設值:
"/"
cacheGroups
chunks
- 類型:
string
- 預設值:
"all"
optimizeCSS
OptimizeCSSAssets 外掛程式選項。
當啟用 extractCSS
時,預設為 true。
- 類型:
boolean
- 預設值:
false
參見: css-minimizer-webpack-plugin 文件。
plugins
新增 webpack 外掛程式。
- 類型:
array
範例:
import webpack from 'webpack'
import { version } from './package.json'
// ...
plugins: [
new webpack.DefinePlugin({
'process.VERSION': version
})
]
postcss
自訂 PostCSS Loader。與 postcss-loader
選項 相同的選項
postcssOptions
plugins
- 類型:
object
- 預設
{
"autoprefixer": {},
"cssnano": {}
}
profile
在 webpackbar 中啟用 profiler。
通常透過 CLI 參數 --profile
啟用。
- 類型:
boolean
- 預設值:
false
參見: webpackbar。
serverURLPolyfill
要載入以提供 URL 和 URLSearchParams 的 polyfill 庫。
預設為 'url'
(參見套件)。
- 類型:
string
- 預設值:
"url"
warningIgnoreFilters
用於隱藏建置警告的篩選器。
- 類型:
array
workspaceDir
定義應用程式的工作區目錄。
通常在 monorepo 設定中使用。Nuxt 會嘗試自動偵測您的工作區目錄,但您可以在此處覆寫它。通常不需要設定此選項。
- 類型:
string
- 預設值:
"/<workspaceDir>"