這可能是 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 的應用程式資訊清單，我們現在會自動使您的 payload 快取失效，這表示在部署後，您不應該再受困於過時的資料 (#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 hook 用於連結到 View Transitions API (#26045)。
🛍️ 僅限伺服器端和僅限客戶端的頁面
此版本在 Nuxt 中加入了僅限伺服器端和僅限客戶端的頁面！現在您可以在頁面中新增 .server.vue 或 .client.vue 後綴，以自動處理它。
僅限客戶端的頁面將完全在客戶端呈現，並完全跳過伺服器端渲染，就像整個頁面都包在 <ClientOnly> 中一樣。請負責任地使用此功能。在客戶端載入時的閃爍可能會造成糟糕的使用者體驗，因此請確保您真的需要避免伺服器端載入。也請考慮使用具有 fallback slot 的 <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 目錄，現在這些目錄將可以正常運作。
📦 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
這也會重新整理您的鎖定檔，並確保您從 Nuxt 依賴的其他相依性中提取更新，尤其是在 unjs 生態系統中。
👉 完整發行說明
感謝您閱讀到這裡！我們希望您喜歡這個新版本。如果您有任何意見或問題，請務必告知我們。
Nuxting 愉快 ✨