CLI 提升

現(xiàn)在正在使用新的 Nuxt CLI，它已經(jīng)獨(dú)立進(jìn)行版本管理。

現(xiàn)在可以使用以下命令來(lái)安裝模塊：

nuxi module add <module-name>

現(xiàn)在與 Vite 的 WebSocket 共享同一個(gè)端口，這意味著在開(kāi)發(fā)中更好地支持 Docker 容器。

內(nèi)置 Nuxt DevTools

Nuxt DevTools v1.0.0 已經(jīng)發(fā)布，它已準(zhǔn)備好作為 Nuxt 的直接依賴(lài)項(xiàng)發(fā)布。

自動(dòng)安裝 Nuxt Image

<NuxtImg> 和 <NuxtPicture> 是內(nèi)置組件?，F(xiàn)在，會(huì)在首次使用時(shí)自動(dòng)安裝 @nuxt/image。

如果你在網(wǎng)站中使用圖像，建議使用@nuxt/image，它可以應(yīng)用優(yōu)化來(lái)提高網(wǎng)站的性能。

更深層次的布局掃描

現(xiàn)在支持掃描 ~/layouts 中子文件夾內(nèi)的布局，就像掃描 ~/components 一樣。

其中最顯著的改進(jìn)是現(xiàn)在通過(guò)使用原生的fetch（在Node 18+中受支持）來(lái)在生產(chǎn)環(huán)境中減少約 40% 的捆綁包大小。因此，如果可能的話(huà)，建議將 Node 版本至少升級(jí)到 18 以上。

應(yīng)用清單

現(xiàn)在支持內(nèi)置的應(yīng)用清單，它會(huì)在 /_nuxt/builds/meta/<buildId>.json 位置生成一個(gè)清單文件。

它可以?xún)H在預(yù)渲染的路由中加載有效載荷，如果是通過(guò)nuxt generate生成站點(diǎn)，還可以避免控制臺(tái)中出現(xiàn) 404 錯(cuò)誤。

它還啟用了客戶(hù)端路由規(guī)則。目前僅支持重定向路由規(guī)則；在執(zhí)行客戶(hù)端導(dǎo)航時(shí)，它們將進(jìn)行重定向。

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/about': { redirect: '/about-us' }
  }
})

// pages/index.vue
<template>
  <div>
    <!-- 將在客戶(hù)端重定向到 /about -->
    <NuxtLink to="/about">About</NuxtLink>
  </div>
</template>

應(yīng)用清單還可以實(shí)現(xiàn)未來(lái)的增強(qiáng)功能，包括通過(guò)檢查 /_nuxt/builds/latest.json 來(lái)檢測(cè)新部署。

如果需要，可以通過(guò)在 nuxt.config 文件中將 experimental.appManifest 設(shè)置為 false 來(lái)選擇啟用此行為。

范圍和上下文的改進(jìn)

現(xiàn)在為在插件中執(zhí)行的 Nuxt 組合式函數(shù)定義了一個(gè)“范圍”，這使得在離開(kāi)網(wǎng)站之前可以運(yùn)行同步清理操作，并使用 Vue 的onScopeDispose生命周期方法。

現(xiàn)在還支持 Vue composition API 的原生異步上下文，支持在 Node 和 Bun 上啟用實(shí)驗(yàn)性的asyncContext，以支持原生的異步上下文功能。

如果遇到 Nuxt instance unavailable 這個(gè)問(wèn)題，啟用此選項(xiàng)可能會(huì)解決這個(gè)問(wèn)題：

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    asyncContext: true
  }
})

一旦 Nuxt.js 有了跨運(yùn)行時(shí)支持，將默認(rèn)啟用這個(gè)選項(xiàng)。

NuxtLink 默認(rèn)值

可以使用 defineNuxtLink 工具定義自己的 <NuxtLink> 組件?，F(xiàn)在可以直接在nuxt.config文件中自定義內(nèi)置的<NuxtLink>選項(xiàng)。

這樣就可以在整個(gè)站點(diǎn)內(nèi)強(qiáng)制使用尾部斜杠行為，例如：

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        activeClass: 'nuxt-link-active',
        trailingSlash: 'append'
      }
    }
  }
})

數(shù)據(jù)請(qǐng)求改進(jìn)優(yōu)化

useAsyncData 和 useFetch 有兩個(gè)非常重要的新功能：

現(xiàn)在可以設(shè)置deep: false來(lái)防止在從這些組合式函數(shù)返回的數(shù)據(jù)對(duì)象上進(jìn)行深度響應(yīng)。如果返回大型數(shù)組或?qū)ο螅瑒t這應(yīng)該是一項(xiàng)性能優(yōu)化。當(dāng)重新獲取對(duì)象時(shí)，它仍將更新；如果在數(shù)據(jù)的深層屬性中更改某個(gè)屬性，則它只會(huì)觸發(fā)對(duì)象更新而不會(huì)觸發(fā)響應(yīng)式效果。

現(xiàn)在可以使用 getCachedData 選項(xiàng)來(lái)處理這些可組合項(xiàng)的自定義緩存。

<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)為這些可組合項(xiàng)配置一些默認(rèn)值：

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    defaults: {
      useAsyncData: {
        deep: false
      },
      useFetch: {
        retry: false,
        retryDelay: 100,
        retryStatusCodes: [500],
        timeout: 100
      }
    }
  }
})

層級(jí)改進(jìn)優(yōu)化

現(xiàn)在更加謹(jǐn)慎地按照層級(jí)的順序加載層級(jí)插件和中間件，始終將自己的插件和中間件放在最后加載。這意味著可以依賴(lài)層級(jí)可能注入的實(shí)用工具。

如果你正在使用遠(yuǎn)程層級(jí)，現(xiàn)在會(huì)將這些層級(jí)克隆到的node_modules/文件夾中，這樣層級(jí)就可以使用項(xiàng)目的依賴(lài)項(xiàng)。

**Nightly **發(fā)布渠道

每個(gè) Nuxt 的main分支提交都會(huì)自動(dòng)部署到一個(gè)新的版本，以供在正式發(fā)布之前進(jìn)行測(cè)試。此次更新將從“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ā)布，包含大量改進(jìn)和錯(cuò)誤修復(fù)。

類(lèi)型導(dǎo)入變化

注意：此更新可能需要更改項(xiàng)目中的代碼。

Vue 要求類(lèi)型導(dǎo)入必須是顯式的（這樣Vue編譯器才能正確優(yōu)化和解析類(lèi)型導(dǎo)入，例如用于props等）。

因此，Nuxt.js 團(tuán)隊(duì)決定在 Nuxt 項(xiàng)目中默認(rèn)啟用 verbatimModuleSyntax，這將在沒(méi)有顯式類(lèi)型導(dǎo)入的情況下拋出類(lèi)型錯(cuò)誤。要解決此問(wèn)題，需要更新導(dǎo)入語(yǔ)句：

- import { someFunction, SomeOptions } from 'some-library'
+ import { someFunction } from 'some-library'
+ import type { SomeOptions } from 'some-library'

如果出于某種原因需要在項(xiàng)目中撤消此更改，可以設(shè)置以下配置：

// nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        verbatimModuleSyntax: false
      }
    }
  }
})

更新

可以通過(guò)以下命令來(lái)更新最新版本：

nuxi upgrade