這可能是 Nuxt v4 釋出前的最後一個次要版本，所以我們為它 packed 滿了我們希望你會喜歡的功能和改進！✨
🪵 更好的日誌記錄
在開發 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 鉤子（在 Nuxt 和 Nitro 中都有），它在伺服器和客戶端上都會呼叫，允許你根據需要自行處理它們。
如果你遇到任何問題，可以停用它們——或者阻止它們記錄到你的瀏覽器控制檯。
export default defineNuxtConfig({
features: {
devLogs: false
// or 'silent' to allow you to handle yourself with `dev:ssr-logs` hook
},
})
🎨 預覽模式
一個新的 usePreviewMode 可組合函式旨在簡化在 Nuxt 應用中使用預覽模式。
const { enabled, state } = usePreviewMode()
當啟用預覽模式時，所有你的資料獲取可組合函式，例如 useAsyncData 和 useFetch 將會重新執行，這意味著負載中任何快取的資料都將被繞過。
💰 快取失效負載
如果你沒有停用 Nuxt 的應用程式清單，我們現在會自動使你的負載快取失效，這意味著你在部署後不會被過時的資料困擾（#26068).
👮♂️ 中介軟體 routeRules
現在可以在應用程式的 Vue 部分（即非 Nitro 路由）中為頁面路徑定義中介軟體（#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> 元素。它支援伺服器端傳送，這意味著你可以在伺服器上安全地執行此操作
<template>
<Teleport to="#teleports">
<span>
Something
</span>
</Teleport>
</template>
🚦 載入指示器和過渡控制
現在可以設定自定義時間來隱藏載入指示器，並在需要時強制執行 finish() 方法（#25932).
還有一個新的 page:view-transition:start 鉤子，用於掛鉤到 View Transitions API（#26045）如果你啟用了該功能。
🛍️ 僅伺服器端和僅客戶端頁面
此版本在 Nuxt 中引入了僅伺服器端和僅客戶端頁面！你現在可以為頁面新增 .server.vue 或 .client.vue 字尾以實現自動處理。
僅客戶端頁面將完全在客戶端渲染，並完全跳過伺服器渲染，就像整個頁面都被 <ClientOnly> 包裹一樣。請負責任地使用此功能。客戶端載入時的閃爍可能會給使用者帶來糟糕的體驗，因此請確保你確實需要避免伺服器端載入。還可以考慮使用帶有 fallback 插槽的 <ClientOnly> 來渲染骨架載入器（#25037).
⚗️ 僅伺服器頁面甚至更有用，因為它們使你能夠在客戶端導航中整合完全伺服器渲染的 HTML。當連結到它們在視口中時，它們甚至會被預取——所以你將獲得即時載入（#24954).
🤠 伺服器元件大禮包
當使用伺服器元件時，你現在可以在樹中的任何位置使用 nuxt-client 屬性（#25479).
export default defineNuxtConfig({
experimental: {
componentIslands: {
selectiveClient: 'deep'
}
},
})
你可以監聽伺服器元件的 @error 事件，如果載入元件時出現任何問題，該事件將被觸發（#25798).
最後，當你的專案或其任何層中包含僅伺服器元件或僅伺服器頁面時，僅伺服器元件現在被智慧啟用（#26223).
🔥 效能改進
我們已經發布了許多效能改進，包括只更新已更改的虛擬模板（#26250），使用“分層”預渲染快取（#26104），該快取在預渲染時會回退到檔案系統而不是將所有內容保留在記憶體中——以及許多其他示例。
📂 公共資產處理
我們已對 Vite 的公共資產處理進行了重新實現，這意味著你 public/ 目錄或你的層目錄中的公共資產現在將完全由 Nuxt 解析（#26163），因此如果你添加了帶有自定義字首的 nitro.publicAssets 目錄，這些現在將起作用。
📦 塊命名
我們更改了 JavaScript 塊的預設檔案命名模式 _nuxt/[name].[hash].js。現在，我們預設為 _nuxt/[hash].js。這是為了避免廣告攔截器因你的元件或塊名稱而觸發誤報，這可能是一個非常難以除錯的問題。（#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 ✨