5 月 16 日，Nuxt 3.5.0 正式發(fā)布，它帶來(lái)了 Vue 3.3 版本、新的默認(rèn)設(shè)置、交互式服務(wù)端組件、類(lèi)型化頁(yè)面、環(huán)境配置等。

Vue 3.3

Vue 3.3 已經(jīng)發(fā)布，具有許多令人興奮的特性，特別是在類(lèi)型支持方面。包括：

• 宏中的導(dǎo)入和復(fù)雜類(lèi)型支持
• 通用組件
• 更符合人體工程學(xué)的 defineEmits
• 使用 defineSlots 的類(lèi)型插槽
• 響應(yīng)式 Props 解構(gòu)
• defineModel
• defineOptions
• 使用 toRef 和 toValue 實(shí)現(xiàn)更好的 getter 支持
• JSX 導(dǎo)入源支持
• 維護(hù)基礎(chǔ)設(shè)施改進(jìn)

Nitropack v2.4

Nuxt.js 團(tuán)隊(duì)一直致力于對(duì) Nitro 進(jìn)行大量改進(jìn)，這些改進(jìn)已經(jīng)在 Nitro v2.4 中實(shí)現(xiàn)——其中包含許多錯(cuò)誤修復(fù)、Cloudflare 模塊工作格式的更新、Vercel KV 支持等。

注意：如果需要部署到 Vercel 或 Netlify 并希望從增量靜態(tài)再生中受益，應(yīng)該更新路由規(guī)則：

routeRules: {
--  '/blog/**': { swr: 3000 },
++  '/blog/**': { isr: 3000 },
}

豐富的 JSON 負(fù)載

現(xiàn)在默認(rèn)啟用豐富的 JSON 負(fù)載序列化。這既更快又允許序列化從 Nuxt 服務(wù)端傳遞到客戶(hù)端的有效載荷中的復(fù)雜對(duì)象（以及在為預(yù)渲染站點(diǎn)提取有效載荷數(shù)據(jù)時(shí)）。

現(xiàn)在這意味著開(kāi)箱即用地支持各種豐富的 JS 類(lèi)型：正則表達(dá)式、日期、Map 和 Set 以及 BigInt 以及 NuxtError，以及 Vue 特定的對(duì)象，如 ref、reactive、shallowRef 和 shallowReactive。

長(zhǎng)期以來(lái)，由于序列化 Errors 和其他非 POJO 對(duì)象的問(wèn)題，Nuxt 一直在使用自己的 devalue fork，但現(xiàn)在已經(jīng)過(guò)渡回原始版本。我們甚至可以使用新的對(duì)象語(yǔ)法Nuxt插件注冊(cè)自定義類(lèi)型：

export default definePayloadPlugin(() => {
  definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
  definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})

交互式服務(wù)端組件

這個(gè)功能應(yīng)該被認(rèn)為是高度實(shí)驗(yàn)性的，現(xiàn)在通過(guò)插槽支持服務(wù)端組件內(nèi)的交互式內(nèi)容。

環(huán)境配置

現(xiàn)在可以在 nuxt.config 中配置完全類(lèi)型化的、按環(huán)境的覆蓋：

export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  $development: {
    //
  }
})

如果正在創(chuàng)作圖層，還可以使用 $meta 關(guān)鍵字來(lái)提供元數(shù)據(jù)，層的使用者可能會(huì)用到它。

完全類(lèi)型化的頁(yè)面

通過(guò)與unplugin-vue-router的實(shí)驗(yàn)性整合，可以在Nuxt應(yīng)用中受益于完全類(lèi)型化的路由。

開(kāi)箱即用，這將啟用對(duì)navigateTo、<NuxtLink>、router.push()等功能的類(lèi)型化使用。

甚至可以通過(guò)使用const route = useRoute('route-name')在頁(yè)面內(nèi)獲取類(lèi)型化的參數(shù)。

直接在nuxt.config中啟用此功能：

export default defineNuxtConfig({
  experimental: {
    typedPages: true
  }
})

Bundler的模塊解析

現(xiàn)在，Nuxt內(nèi)部完全支持使用 bundler 策略進(jìn)行模塊解析。

如果可能，建議采用此方法。它具有對(duì)子路徑導(dǎo)出的類(lèi)型支持，但與 Node16 解析相比，更準(zhǔn)確地匹配了諸如 Vite 和 Nuxt 這樣的構(gòu)建工具的行為。

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        moduleResolution: 'bundler'
      }
    }
  }
})

這將開(kāi)啟TypeScript跟蹤Node子路徑導(dǎo)出的功能。例如，如果一個(gè)庫(kù)有一個(gè)像mylib/path這樣的子路徑導(dǎo)出，映射到mylib/dist/path.mjs，那么可以從mylib/dist/path.d.ts中引入此類(lèi)型，而不需要庫(kù)作者創(chuàng)建mylib/path.d.ts。

分離的服務(wù)端類(lèi)型

Nuxt 團(tuán)隊(duì)計(jì)劃通過(guò)為~/server目錄生成單獨(dú)的tsconfig.json來(lái)改善IDE中"nitro"和"vue"部分之間的清晰度。

可以通過(guò)添加一個(gè)額外的~/server/tsconfig.json并使用以下內(nèi)容來(lái)使用：

{
  "extends": "../.nuxt/tsconfig.server.json"
}

雖然現(xiàn)在在類(lèi)型檢查 (nuxi typecheck) 時(shí)不會(huì)考慮這些值，但應(yīng)該在 IDE 中獲得更好的類(lèi)型提示。

棄用內(nèi)容

雖然沒(méi)有為 Nuxt 2 中的build.extend鉤子提供類(lèi)型或文檔，但一直在webpack 中調(diào)用它，現(xiàn)在明確地棄用了它，并將在將來(lái)的小版本中刪除它。

升級(jí)

建議運(yùn)行以下命令進(jìn)行升級(jí)：

nuxi upgrade --force

這也將刷新 lockfile 文件，并確保從 Nuxt 依賴(lài)的其他依賴(lài)項(xiàng)中獲取更新，特別是在 unjs 生態(tài)系統(tǒng)中。

參考：https://nuxt.com/blog/v3-5