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

Vue 3.3

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

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

Nitropack v2.4

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

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

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

豐富的 JSON 負載

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

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

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

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

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

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

環(huán)境配置

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

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

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

完全類型化的頁面

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

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

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

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

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

Bundler的模塊解析

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

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

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

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

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

Nuxt 團隊計劃通過為~/server目錄生成單獨的tsconfig.json來改善IDE中"nitro"和"vue"部分之間的清晰度。

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

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

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

棄用內(nèi)容

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

升級

建議運行以下命令進行升級：

nuxi upgrade --force

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

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