Nuxt 3.8 正式發(fā)布，一起來看看都有哪些功能吧！
CLI 提升
現(xiàn)在正在使用新的 Nuxt CLI，它已經(jīng)獨立進行版本管理。
現(xiàn)在可以使用以下命令來安裝模塊：
nuxi module add <module-name>現(xiàn)在與 Vite 的 WebSocket 共享同一個端口，這意味著在開發(fā)中更好地支持 Docker 容器。
內(nèi)置 Nuxt DevTools
Nuxt DevTools v1.0.0 已經(jīng)發(fā)布，它已準備好作為 Nuxt 的直接依賴項發(fā)布。
自動安裝 Nuxt Image
<NuxtImg> 和 <NuxtPicture> 是內(nèi)置組件。現(xiàn)在，會在首次使用時自動安裝 @nuxt/image。
如果你在網(wǎng)站中使用圖像，建議使用@nuxt/image，它可以應(yīng)用優(yōu)化來提高網(wǎng)站的性能。
更深層次的布局掃描
現(xiàn)在支持掃描 ~/layouts 中子文件夾內(nèi)的布局，就像掃描 ~/components 一樣。
其中最顯著的改進是現(xiàn)在通過使用原生的fetch（在Node 18+中受支持）來在生產(chǎn)環(huán)境中減少約 40% 的捆綁包大小。因此，如果可能的話，建議將 Node 版本至少升級到 18 以上。
應(yīng)用清單
現(xiàn)在支持內(nèi)置的應(yīng)用清單，它會在 /_nuxt/builds/meta/<buildId>.json 位置生成一個清單文件。
它可以僅在預(yù)渲染的路由中加載有效載荷，如果是通過nuxt generate生成站點，還可以避免控制臺中出現(xiàn) 404 錯誤。
它還啟用了客戶端路由規(guī)則。目前僅支持重定向路由規(guī)則；在執(zhí)行客戶端導(dǎo)航時，它們將進行重定向。
// nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
'/about': { redirect: '/about-us' }
}
})
// pages/index.vue
<template>
<div>
<!-- 將在客戶端重定向到 /about -->
<NuxtLink to="/about">About</NuxtLink>
</div>
</template>應(yīng)用清單還可以實現(xiàn)未來的增強功能，包括通過檢查 /_nuxt/builds/latest.json 來檢測新部署。
如果需要，可以通過在 nuxt.config 文件中將 experimental.appManifest 設(shè)置為 false 來選擇啟用此行為。
范圍和上下文的改進
現(xiàn)在為在插件中執(zhí)行的 Nuxt 組合式函數(shù)定義了一個“范圍”，這使得在離開網(wǎng)站之前可以運行同步清理操作，并使用 Vue 的onScopeDispose生命周期方法。
現(xiàn)在還支持 Vue composition API 的原生異步上下文，支持在 Node 和 Bun 上啟用實驗性的asyncContext，以支持原生的異步上下文功能。
如果遇到 Nuxt instance unavailable 這個問題，啟用此選項可能會解決這個問題：
// nuxt.config.ts
export default defineNuxtConfig({
experimental: {
asyncContext: true
}
})一旦 Nuxt.js 有了跨運行時支持，將默認啟用這個選項。
NuxtLink 默認值
可以使用 defineNuxtLink 工具定義自己的 <NuxtLink> 組件。現(xiàn)在可以直接在nuxt.config文件中自定義內(nèi)置的<NuxtLink>選項。
這樣就可以在整個站點內(nèi)強制使用尾部斜杠行為，例如：
// nuxt.config.ts
export default defineNuxtConfig({
experimental: {
defaults: {
nuxtLink: {
activeClass: 'nuxt-link-active',
trailingSlash: 'append'
}
}
}
})數(shù)據(jù)請求改進優(yōu)化
useAsyncData 和 useFetch 有兩個非常重要的新功能：
現(xiàn)在可以設(shè)置deep: false來防止在從這些組合式函數(shù)返回的數(shù)據(jù)對象上進行深度響應(yīng)。如果返回大型數(shù)組或?qū)ο螅瑒t這應(yīng)該是一項性能優(yōu)化。當重新獲取對象時，它仍將更新；如果在數(shù)據(jù)的深層屬性中更改某個屬性，則它只會觸發(fā)對象更新而不會觸發(fā)響應(yīng)式效果。
現(xiàn)在可以使用 getCachedData 選項來處理這些可組合項的自定義緩存。
<script setup>
const nuxtApp = useNuxtApp()
const { data } = await useAsyncData(() => { /* fetcher */ }, {
getCachedData: key => nuxtApp.payload.static[key] ?? nuxtApp.payload.data[key]
})
</script>除此之外，還支持在應(yīng)用范圍內(nèi)為這些可組合項配置一些默認值：
// nuxt.config.ts
export default defineNuxtConfig({
experimental: {
defaults: {
useAsyncData: {
deep: false
},
useFetch: {
retry: false,
retryDelay: 100,
retryStatusCodes: [500],
timeout: 100
}
}
}
})層級改進優(yōu)化
現(xiàn)在更加謹慎地按照層級的順序加載層級插件和中間件，始終將自己的插件和中間件放在最后加載。這意味著可以依賴層級可能注入的實用工具。
如果你正在使用遠程層級，現(xiàn)在會將這些層級克隆到的node_modules/文件夾中，這樣層級就可以使用項目的依賴項。
**Nightly **發(fā)布渠道
每個 Nuxt 的main分支提交都會自動部署到一個新的版本，以供在正式發(fā)布之前進行測試。此次更新將從“edge發(fā)布渠道”改名為“nightly 發(fā)布渠道”，以避免與邊緣部署混淆。
- nuxt3 現(xiàn)在更名為 nuxt-nightly
- nuxi-edge 現(xiàn)在更名為 nuxi-nightly
- @nuxt/kit-edge 現(xiàn)在更名為 @nuxt/kit-nightly
Nitro v2.7
Nitro v2.7 已發(fā)布，包含大量改進和錯誤修復(fù)。
類型導(dǎo)入變化
注意：此更新可能需要更改項目中的代碼。
Vue 要求類型導(dǎo)入必須是顯式的（這樣Vue編譯器才能正確優(yōu)化和解析類型導(dǎo)入，例如用于props等）。
因此，Nuxt.js 團隊決定在 Nuxt 項目中默認啟用 verbatimModuleSyntax，這將在沒有顯式類型導(dǎo)入的情況下拋出類型錯誤。要解決此問題，需要更新導(dǎo)入語句：
- import { someFunction, SomeOptions } from 'some-library'
+ import { someFunction } from 'some-library'
+ import type { SomeOptions } from 'some-library'如果出于某種原因需要在項目中撤消此更改，可以設(shè)置以下配置：
// nuxt.config.ts
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
verbatimModuleSyntax: false
}
}
}
})更新
可以通過以下命令來更新最新版本：
nuxi upgrade
