💻 CLI 改进
再次提醒您,我们现在正在使用新的 Nuxt CLI,它现在是单独版本化的。
nuxi module add <module-name>
安装模块✨ 内置 Nuxt DevTools
Nuxt DevTools v1.0.0 已经发布,我们现在认为它已准备好作为 Nuxt 的直接依赖项发布。
📸 Nuxt Image 自动安装
<NuxtImg>
和 <NuxtPicture>
一流的内置组件。
我们现在在首次使用 @nuxt/image
时自动安装它 (#23717)。
@nuxt/image
;它可以应用优化来提高您网站的性能。📂 更深层次的布局扫描
我们现在支持在 ~/layouts
的子文件夹中扫描布局,就像我们对 ~/components
所做的那样。
文件 | 布局名称 |
---|---|
~/layouts/desktop/default.vue | 'desktop-default' |
~/layouts/desktop-base/base.vue | 'desktop-base' |
~/layouts/desktop/index.vue | 'desktop' |
📊 应用程序清单
我们现在支持内置的应用程序清单(参见 PR #21641),它在 /_nuxt/builds/meta/<buildId>.json
生成清单。
如果站点是使用 nuxt generate
生成的,它可以仅为预渲染路由加载 payload,从而防止控制台中出现 404 错误。
它还支持客户端路由规则。目前仅支持 redirect
路由规则;它们现在将在执行客户端导航时重定向。
export default defineNuxtConfig({
routeRules: {
'/about': { redirect: '/about-us' }
}
})
/_nuxt/builds/latest.json
来检测新的部署。nuxt.config
文件中将 experimental.appManifest
设置为 false
。🤝 作用域和上下文改进
我们现在为在插件中执行的 Nuxt composables 定义了一个“作用域” (#23667),这允许在使用 Vue onScopeDispose
生命周期方法导航离开您的站点之前运行同步清理。
我们现在还支持 Vue composition API 的 原生异步上下文 (#23526)。如果您不了解,我们在 Node 和 Bun 上支持原生异步上下文,通过 experimental.asyncContext
启用。
如果您遇到 Nuxt instance unavailable
问题,启用此选项可能会解决您的问题
export default defineNuxtConfig({
experimental: {
asyncContext: true
}
})
🔗 NuxtLink 默认值
您可以使用 defineNuxtLink
实用程序定义您自己的 <NuxtLink>
组件。
今天,您可以直接在您的 nuxt.config
文件中自定义内置 <NuxtLink>
的选项 (#23724)。
例如,这可以使您在整个站点中强制执行尾部斜杠行为
export default defineNuxtConfig({
experimental: {
defaults: {
nuxtLink: {
activeClass: 'nuxt-link-active',
trailingSlash: 'append'
}
}
}
})
⚡️ 数据获取改进
我们为 useAsyncData
和 useFetch
提供了两个非常重要的新功能
- 您现在可以设置
deep: false
以防止对从这些 composables 返回的data
对象进行深度响应式处理 (#23600)。如果您返回大型数组或对象,这应该可以提高性能。当重新获取时,对象仍将更新;如果您更改data
深处的属性,它只是不会触发响应式效果。 - 您现在可以使用
getCachedData
选项来处理这些 composables 的自定义缓存 (#20747)
<script setup>
const nuxtApp = useNuxtApp()
const { data } = await useAsyncData(() => { /* fetcher */ }, {
// this will not refetch if the key exists in the payload
getCachedData: key => nuxtApp.payload.static[key] ?? nuxtApp.payload.data[key]
})
</script>
我们还支持在应用程序范围内为这些 composables 配置一些默认值 (#23725)
export default defineNuxtConfig({
experimental: {
defaults: {
useAsyncData: {
deep: false
},
useFetch: {
retry: false,
retryDelay: 100,
retryStatusCodes: [500],
timeout: 100
}
}
}
})
🔢 Layer 改进
我们现在更仔细地加载 layer 插件 (#22889 和 #23148) 和中间件 (#22925 和 #23552),按照 layers 的顺序,始终最后加载您自己的插件和中间件。 这应该意味着您可以依赖 layers 可能注入的实用程序。
可能最重要的更改之一 - 如果您正在使用远程 layers,我们现在将这些 layers 克隆到您的 node_modules/
文件夹中 (#109),以便 layers 可以与您的项目一起使用依赖项。 有关完整详细信息,请参阅 c12
发行说明。
😴 每晚发布频道
Nuxt main
分支的每次提交都会自动部署到新的版本,以便在发布之前更轻松地进行测试。 我们已将其从“edge release channel”重命名为“nightly release channel”,以避免与边缘部署混淆。 也可能是与 Microsoft Edge 混淆(虽然我没有听说有人对此感到困惑!)
nuxt3
现在是nuxt-nightly
nuxi-edge
现在是nuxi-nightly
@nuxt/kit-edge
现在是@nuxt/kit-nightly
- ... 等等。
⚗️ Nitro v2.7
Nitro v2.7 已经发布,其中包含许多改进和错误修复。
fetch
(#1724),我们现在在生产环境中节省了 40% 的捆绑包大小。 因此,如果可能,我们建议您将 Node 版本更新到至少 18。💪 类型导入更改
Vue 要求类型导入是显式的(以便 Vue 编译器可以正确地优化和解析 props 等的类型导入)。 请参阅 核心 Vue tsconfig.json
。
因此,我们已决定在 Nuxt 项目中默认启用 verbatimModuleSyntax
,如果类型在没有显式 type
导入的情况下导入,这将抛出类型错误。 要解决此问题,您需要更新您的导入
- import { someFunction, SomeOptions } from 'some-library'
+ import { someFunction } from 'some-library'
+ import type { SomeOptions } from 'some-library'
您还可能会遇到 Nuxt 生态系统中的模块需要更新;请为这些模块打开一个 issue。 如果您在遇到任何问题(如果您是模块作者)时需要帮助,我也非常乐意提供帮助。 只需要标记我,我会查看一下。
如果出于任何原因您需要在您的项目中撤消此更改,您可以设置以下配置
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
verbatimModuleSyntax: false
}
}
}
})
但是,我们建议仅暂时这样做,因为 Vue 确实需要设置此选项才能获得最佳结果。
✅ 升级
与往常一样,我们升级的建议是运行
npx nuxi upgrade
完整发行说明
感谢您阅读到这里! 我们希望您喜欢新版本。 如果您有任何反馈或问题,请告诉我们。
Nuxting 快乐 ✨