💻 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
生成,它仅对预渲染路由启用加载负载,从而防止控制台出现 404 错误。
它还支持客户端路由规则。目前仅支持 redirect
路由规则;它们现在将在执行客户端导航时进行重定向。
export default defineNuxtConfig({
routeRules: {
'/about': { redirect: '/about-us' }
}
})
<template>
<div>
<!-- Will be redirected to /about-us on client-side -->
<NuxtLink to="/about">About</NuxtLink>
</div>
</template>
/_nuxt/builds/latest.json
来检测新的部署。nuxt.config.ts
文件中将 experimental.appManifest
设置为 false
来选择退出此行为。🤝 作用域和上下文改进
我们现在为在插件中执行的 Nuxt 组合函数定义了一个“作用域”(#23667),它允许在使用 Vue 的 onScopeDispose
生命周期方法在离开网站之前运行同步清理。onScopeDispose
生命周期方法。
我们现在还支持原生异步上下文用于 Vue 组合式 API (#23526)。如果你不知道,我们支持 Node 和 Bun 上的原生异步上下文,通过 experimental.asyncContext
启用。
如果你遇到 Nuxt instance unavailable
的问题,启用此选项可能会解决你的问题
export default defineNuxtConfig({
experimental: {
asyncContext: true
}
})
🔗 NuxtLink 默认值
你可以使用 defineNuxtLink
实用程序定义自己的 <NuxtLink>
组件。
今天,你可以直接在 nuxt.config.ts
文件中自定义内置 <NuxtLink>
的选项(#23724).
例如,这可以让你在整个网站中强制执行尾部斜杠行为。
export default defineNuxtConfig({
experimental: {
defaults: {
nuxtLink: {
activeClass: 'nuxt-link-active',
trailingSlash: 'append'
}
}
}
})
⚡️ 数据获取改进
我们为 useAsyncData
和 useFetch
提供了两个非常重要的新功能。
- 你现在可以设置
deep: false
,以防止这些组合函数返回的data
对象进行深度响应式(#23600)。如果你返回大型数组或对象,这应该会提高性能。该对象在重新获取时仍会更新;如果你更改data
深层属性,它不会触发响应式效果。 - 你现在可以使用
getCachedData
选项来处理这些组合函数的自定义缓存(#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>
我们还支持以应用程序范围的方式为这些组合函数配置一些默认值(#23725):
export default defineNuxtConfig({
experimental: {
defaults: {
useAsyncData: {
deep: false
},
useFetch: {
retry: false,
retryDelay: 100,
retryStatusCodes: [500],
timeout: 100
}
}
}
})
🔢 层改进
我们现在更仔细地按照层的顺序加载层插件(#22889等等#23148)和中间件(#22925等等#23552),总是最后加载你自己的插件和中间件。这意味着你可以依赖层可能注入的实用程序。
最重大的更改之一是——如果你正在使用远程层,我们现在会在你的 node_modules/
文件夹中克隆它们(#109),以便层可以在你的项目中使用依赖项。参见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
,在生产环境中节省了 40% 的捆绑包大小(#1724)。因此,如果可能,我们建议你将 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 生态系统中的模块需要更新;请为这些模块开一个问题。如果你是模块作者,如果你遇到任何问题,我也很乐意提供帮助。只需标记我,我就会查看。
如果由于某种原因你需要在项目中撤销此更改,你可以设置以下配置
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
verbatimModuleSyntax: false
}
}
}
})
但是,我们建议只暂时这样做,因为 Vue 确实需要设置此选项才能获得最佳结果。
✅ 升级
像往常一样,我们建议您运行以下命令进行升级
npx nuxi upgrade
完整发布说明
感谢你阅读到这里!我们希望你喜欢这个新版本。如果你有任何反馈或问题,请告诉我们。
祝您 Nuxting 愉快 ✨