⚡️ Vue 3.3 发布
Vue 3.3 已正式发布,包含许多令人兴奋的功能,特别是在类型支持方面。
- 新的
defineOptions宏 - “泛型”组件
- 类型化插槽以及在 defineProps 中使用外部类型
- ... 以及更多
得益于#20777@baiwusanyu-c 的贡献,这同时也显著提升了在嵌套页面间导航时的数据获取性能(@antfu等等)。.
阅读 完整的发布公告 以获取更多详情。
🙌 Nitropack v2.4
我们对 Nitro 进行了大量改进,这些改进已集成在 Nitro v2.4 中。您可能已经完成了升级,此版本包含大量错误修复、Cloudflare 模块工作线程格式更新、Vercel KV 支持等内容。
注意:如果您正在部署到 Vercel 或 Netlify,并希望利用增量静态再生(Incremental Static Regeneration),现在应更新您的路由规则。
routeRules: {
-- '/blog/**': { swr: 3000 },
++ '/blog/**': { isr: 3000 },
}
阅读 完整的发行说明。
💖 丰富的 JSON 有效负载(Rich JSON payloads)
丰富的 JSON 有效负载序列化现已默认启用(#19205, #20770)。这不仅速度更快,还允许在从 Nuxt 服务器传递到客户端的有效负载中(以及为预渲染站点提取有效负载数据时)序列化复杂对象。
这意味着现在开箱即用支持多种丰富的 JS 类型:正则表达式、日期、Map、Set、BigInt 以及 NuxtError,同时也支持 Vue 特有的对象,如 ref、reactive、shallowRef 和 shallowReactive。
您可以在我们的测试套件中找到一个示例。
这一切都归功于Rich-Harris/devalue#58。长期以来,由于在序列化错误和其他非 POJO 对象时存在问题,Nuxt 一直使用我们自己的 devalue 分支,但现在我们已经回归到了原始版本。
您甚至可以使用新的对象语法 Nuxt 插件来注册自己的自定义类型:
export default definePayloadPlugin(() => {
definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})
您可以阅读更多关于其工作原理的内容。此处.
🛝 交互式服务器组件
此功能目前应视为高度实验性,但得益于 @huang-julien 的出色工作,我们现在支持通过插槽在服务器组件内使用交互式内容(#20284).
您可以关注服务器组件路线图:#19772.
⏰ 环境配置
现在您可以在 nuxt.config.ts 中配置完全类型化的、针对特定环境的覆盖项。
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
}
})
如果您正在编写层(layers),也可以使用 $meta 键来提供元数据,供您或层的使用者使用。
阅读更多关于特定环境覆盖的内容。.
💪 完全类型化的页面
通过与 unplugin-vue-router 的实验性集成,您可以从 Nuxt 应用中的全类型路由中获益。unplugin-vue-router- 感谢 @posva 的出色工作。@posva!
开箱即用,这将启用 navigateTo、<NuxtLink>、router.push() 等的类型化使用。
通过使用 const route = useRoute('route-name'),您甚至可以在页面内获取类型化的参数。
直接在您的 nuxt.config.ts 中启用此功能。
export default defineNuxtConfig({
experimental: {
typedPages: true
}
})
🔎 'Bundler' 模块解析
我们现在在 Nuxt 中全面支持 bundler 策略的模块解析。模块解析.
我们建议尽可能采用此策略。例如,它对子路径导出具有类型支持,且相比 Node16 解析,它与 Vite 和 Nuxt 等构建工具的行为更为匹配。
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
moduleResolution: 'bundler'
}
}
}
})
这开启了 TypeScript “追踪” Node 子路径导出的能力。例如,如果一个库具有映射到 mylib/dist/path.mjs 的子路径导出 mylib/path,那么它的类型可以从 mylib/dist/path.d.ts 中提取,而无需库作者创建 mylib/path.d.ts。
⚗️ 分离服务器类型
我们计划在您的 IDE 中提高应用中 'nitro' 和 'vue' 部分的清晰度,我们已通过为 ~/server 目录生成单独的 tsconfig.json 来实现了这一目标的第一部分(#20559).
您可以通过添加包含以下内容的 ~/server/tsconfig.json 来使用:
{
"extends": "../.nuxt/tsconfig.server.json"
}
尽管目前这些值在进行类型检查(nuxi typecheck)时不会被采纳,但您应该能在 IDE 中获得更好的类型提示。
💀 弃用项
虽然我们没有记录或为 Nuxt 2 的 build.extend 钩子提供类型定义,但我们在 webpack 构建器中一直使用它。我们现在明确弃用此功能,并将在未来的次要版本中将其移除。
✅ 升级
像往常一样,我们建议您运行以下命令进行升级
npx nuxi upgrade --force
这也将刷新你的 lockfile,并确保你拉取 Nuxt 依赖的其他依赖项(尤其是在 unjs 生态系统中)的更新。