🏘️ 路由组
我们现在支持使用括号/方括号命名目录,以组织您的路由,而不会影响路径。
例如
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue
这将产生应用程序中的 /
、/about
和 /contact
页面。为了 URL 结构的目的,marketing
组将被忽略。
在原始 PR中阅读更多信息。
🏝️ Islands 和 Head 元数据
现在,服务器组件 islands 可以操作 head,例如在渲染时添加 SEO 元数据。
在#27987中阅读更多信息。
🪝 自定义预取触发器
我们现在支持 NuxtLink
的自定义预取触发器 (#27846)。
例如
<template>
<div>
<NuxtLink prefetch-on="interaction">
This will prefetch when hovered or when it gains focus
</NuxtLink>
<!-- note that you probably don't want both enabled! -->
<NuxtLink :prefetch-on="{ visibility: true, interaction: true }">
This will prefetch when hovered/focus - or when it becomes visible
</NuxtLink>
</div>
</template>
还可以为您的应用程序全局启用/禁用这些,并为每个链接覆盖它们。
例如
export default defineNuxtConfig({
experimental: {
defaults: {
nuxtLink: {
prefetch: true,
prefetchOn: { visibility: false, interaction: true }
}
}
}
})
🗺️ 更好的服务器 Source Maps
当使用 node --enable-source-maps
运行时,您可能已经注意到服务器构建中 Vue 文件的 source maps 指向 Vite 构建输出(类似于 .nuxt/dist/server/_nuxt/index-O15BBwZ3.js
)。
现在,即使在 Nitro 构建之后,您的服务器 source maps 也会引用您原始的源文件 (#28521)。
请注意,提高构建性能最简单的方法之一是关闭您不使用的 source maps,您可以在 nuxt.config
中轻松完成此操作
export default defineNuxtConfig({
sourcemap: {
server: false,
client: true,
},
})
🎁 模块作者的新功能
在 Nuxt v4 的准备阶段,我们正在努力为模块作者添加一些关键功能,包括一个在需要时使用的新的 isNuxtMajorVersion
工具 (#27579) 和使用新的 defineNuxtModule().with()
方法为合并模块选项提供更好的推断类型 (#27520)。
✨ 改进的开发警告
当在中间件中使用数据获取组合式函数时,我们不再发出警告 (#28604),并且当用户组件的名称以 Lazy 开头时,我们会发出警告 (#27838)。
🚨 Vue TypeScript 更改
一段时间以来,在 Vue 生态系统中,我们一直在增强 @vue/runtime-core
以向 vue
添加自定义属性和更多内容。但是,这无意中破坏了增强 vue
的项目的类型 - 这现在是官方推荐和记录的增强这些接口的方式(例如,ComponentCustomProperties、GlobalComponents 和 等等)。
这意味着所有库都必须更新其代码(否则它将破坏增强 vue
的库的类型)。
我们已经按照这些思路更新了 Nuxt 中的类型,但是当与尚未这样做的库一起使用时,您可能会遇到最新的 vue-router
的问题。
请创建一个包含复现步骤的问题 - 我很乐意帮助创建 PR 以在上游库中解决。或者,您可以通过在项目的根目录中创建一个 declarations.d.ts
并使用以下代码来解决此问题(感谢 @BobbieGoede)
import type {
ComponentCustomOptions as _ComponentCustomOptions,
ComponentCustomProperties as _ComponentCustomProperties,
} from 'vue';
declare module '@vue/runtime-core' {
interface ComponentCustomProperties extends _ComponentCustomProperties {}
interface ComponentCustomOptions extends _ComponentCustomOptions {}
}
✅ 升级
通常,我们建议的升级方法是运行
npx nuxi@latest upgrade --force
这也将刷新您的 lockfile,并确保您从 Nuxt 依赖的其他依赖项(尤其是在 unjs 生态系统中)中提取更新。
完整发行说明
非常感谢参与此版本的所有人 - 是你们使 Nuxt 成为可能。❤️
如果您有任何反馈或问题,请随时告诉我们!🙏