這可能是 Nuxt v4 之前的最後一個小版本更新，因此我們加入了滿滿的功能和改進，希望能讓您感到驚艷！✨
🪵 更佳的日誌紀錄
當您開發 Nuxt 應用程式並在應用程式中使用 console.log 時，您可能已經注意到，當您重新整理頁面（在伺服器端渲染期間）時，這些日誌不會顯示在您的瀏覽器控制台中。這可能會令人沮喪，因為它使得偵錯您的應用程式變得困難。現在這已成為過去式！
現在，當您有與請求相關聯的伺服器日誌時，它們將會被打包並傳遞到客戶端，並顯示在您的瀏覽器控制台中。非同步上下文用於追蹤這些日誌並將其與觸發它們的請求關聯起來。 (#25936)。
例如，這段程式碼
<script setup>
console.log('Log from index page')
const { data } = await useAsyncData(() => {
console.log('Log inside useAsyncData')
return $fetch('/api/test')
})
</script>
現在當您重新整理頁面時，將會記錄到您的瀏覽器控制台中
Log from index page
[ssr] Log inside useAsyncData
at pages/index.vue
👉 我們也計劃在未來支援將後續日誌串流傳輸到 Nuxt DevTools。
我們還新增了一個 dev:ssr-logs hook（在 Nuxt 和 Nitro 中），它會在伺服器和客戶端被調用，讓您可以在需要時自行處理它們。
如果您遇到任何與此相關的問題，可以停用它們 - 或阻止它們記錄到您的瀏覽器控制台中。
export default defineNuxtConfig({
features: {
devLogs: false
// or 'silent' to allow you to handle yourself with `dev:ssr-logs` hook
},
})
🎨 預覽模式
一個新的 usePreviewMode composable 旨在簡化在您的 Nuxt 應用程式中使用預覽模式。
const { enabled, state } = usePreviewMode()
當預覽模式啟用時，您所有的資料獲取 composable，例如 useAsyncData 和 useFetch 都會重新執行，這表示 payload 中任何快取資料都將被繞過。
💰 快取失效 payload
如果您沒有停用 Nuxt 的應用程式 manifest，我們現在會自動使您的 payload 快取失效，這表示您在部署後不應該再受困於過時的資料 (#26068)。
👮♂️ Middleware routeRules
現在可以在您的應用程式的 Vue 應用程式部分（即，不是您的 Nitro 路由）中為頁面路徑定義 middleware (#25841)。
export default defineNuxtConfig({
routeRules: {
'/admin/**': {
// or appMiddleware: 'auth'
appMiddleware: ['auth']
},
'/admin/login': {
// You can 'turn off' middleware that would otherwise run for a page
appMiddleware: {
auth: false
}
},
},
})
⌫ 新的 clear 資料獲取工具
現在，useAsyncData 和 useFetch 公開了一個 clear 工具。這是一個可以用於將 data 設定為 undefined、將 error 設定為 null、將 pending 設定為 false、將 status 設定為 idle，並將任何當前待處理的請求標記為已取消的函式。(#26259)
<script setup lang="ts">
const { data, clear } = await useFetch('/api/test')
const route = useRoute()
watch(() => route.path, (path) => {
if (path === '/') clear()
})
</script>
🕳️ 新的 #teleports 目標
Nuxt 現在在您的應用程式的 <body> 標籤中包含一個新的 <div id="teleports"></div> 元素。它支援伺服器端 teleports，表示您可以在伺服器上安全地執行此操作
<template>
<Teleport to="#teleports">
<span>
Something
</span>
</Teleport>
</template>
🚦 載入指示器和轉場控制
現在可以為隱藏載入指示器設定自訂時序，並在需要時強制執行 finish() 方法 (#25932)。
如果您啟用了該功能，還有一個新的 page:view-transition:start hook 用於掛鉤到 View Transitions API (#26045)。
🛍️ 僅伺服器端和僅客戶端頁面
此版本在 Nuxt 中推出了僅伺服器端和僅客戶端頁面！您現在可以為頁面新增 .server.vue 或 .client.vue 後綴，以自動處理它。
僅客戶端頁面 將完全在客戶端渲染，並完全跳過伺服器端渲染，就像整個頁面都包裝在 <ClientOnly> 中一樣。請負責任地使用此功能。客戶端的載入閃爍可能會造成不良的使用者體驗，因此請確保您真的需要避免伺服器端載入。也請考慮使用帶有 fallback slot 的 <ClientOnly> 來渲染骨架載入器 (#25037)。
⚗️ 僅伺服器端頁面 甚至更有用，因為它們使您能夠在客戶端導航中整合完全伺服器端渲染的 HTML。當指向它們的連結在 viewport 中時，它們甚至會被預先獲取 - 因此您將獲得即時載入 (#24954)。
🤠 伺服器組件盛宴
當您使用伺服器組件時，您現在可以在樹狀結構中的任何位置使用 nuxt-client 屬性 (#25479)。
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: 'deep'
}
},
})
您可以從伺服器組件監聽 @error 事件，如果在載入組件時出現任何問題，將會觸發該事件 (#25798)。
最後，當您的專案或其任何層中具有僅伺服器端組件或僅伺服器端頁面時，現在會智慧地啟用僅伺服器端組件 (#26223)。
🔥 效能改進
我們推出了一些效能改進，包括僅更新已變更的虛擬模板 (#26250)、使用在預先渲染時回退到檔案系統而不是將所有內容都保存在記憶體中的「分層」預先渲染快取 (#26104) - 以及許多其他範例。
📂 公開資源處理
我們已推出 Vite 公開資源處理的重新實作，這表示您 public/ 目錄或圖層目錄中的公開資源現在完全由 Nuxt 解析 (#26163)，因此如果您已新增具有自訂前綴的 nitro.publicAssets 目錄，這些目錄現在將會運作。
📦 Chunk 命名
我們已變更您的 JS chunk 的預設 _nuxt/[name].[hash].js 檔案名稱模式。現在，我們預設為 _nuxt/[hash].js。這是為了避免廣告阻擋器因觸發您的組件或 chunk 名稱而產生誤報，這可能是一個非常難以偵錯的問題。(#26203)
如果您願意，您可以輕鬆地設定此項以還原為先前的行為
export default defineNuxtConfig({
vite: {
$client: {
build: {
rollupOptions: {
output: {
chunkFileNames: '_nuxt/[name].[hash].js',
entryFileNames: '_nuxt/[name].[hash].js'
}
}
}
}
},
})
💪 類型修復
先前，shamefully-hoist=false 的使用者可能遇到類型未被解析或無法正常運作的問題。您可能也遇到過類型過度實例化的問題。
我們現在嘗試告知 TypeScript 關於某些關鍵類型，以便即使它們是深層巢狀的，也可以被解析 (#26158)。
還有許多其他的類型修復，包括一些關於匯入類型 (#26218 和 #25965) 和模組類型定義 (#25548) 的修復。
✅ 升級
如同往常，我們升級 Nuxt 的建議是執行
nuxi upgrade --force
這也將刷新您的 lockfile，並確保您從 Nuxt 依賴的其他相依性（特別是在 unjs 生態系統中）中提取更新。
👉 完整發布說明
感謝您閱讀到這裡！我們希望您喜歡這個新版本。如果您有任何意見或問題，請務必告知我們。
Nuxting 愉快 ✨