通过 100 多个技巧学习 Nuxt!
发布·  

Nuxt 3.5

Nuxt 3.5.0 发布了,带来了 Vue 3.3、新的默认设置、交互式服务器组件、类型化页面、环境配置等等。

⚡️ Vue 3.3 发布

Vue 3.3 已经发布,带来了许多令人兴奋的功能,特别是在类型支持方面。

  • 新的 defineOptions
  • “泛型”组件
  • 类型化插槽和在 defineProps 中使用外部类型
  • ... 以及更多

这也显著改进了在嵌套页面之间导航时的数据获取(#20777),感谢 @antfu@baiwusanyu-c

阅读完整的发布公告了解更多详情。

🙌 Nitropack v2.4

我们一直在努力改进 Nitro,这些改进已经出现在 Nitro v2.4 中 - 您可能已经进行了此升级,其中包含许多错误修复、对 Cloudflare 模块工作格式的更新、Vercel KV 支持等等。

注意:如果您要部署到 Vercel 或 Netlify 并希望从增量静态重新生成中获益,您现在应该更新您的路由规则

routeRules: {
--  '/blog/**': { swr: 3000 },
++  '/blog/**': { isr: 3000 },
}

阅读完整的发行说明

💖 丰富的 JSON 有效负载

丰富的 JSON 有效负载序列化现在默认启用 (#19205, #20770)。 这更快,并允许在从 Nuxt 服务器传递到客户端的有效负载中序列化复杂对象(以及在提取预渲染站点的有效负载数据时)。

这意味着现在开箱即支持各种丰富的 JS 类型:正则表达式、日期、Map 和 Set 以及 BigInt,以及 NuxtError - 和 Vue 特定的对象,如 refreactiveshallowRefshallowReactive

您可以在我们的测试套件中找到一个示例

这得益于 Rich-Harris/devalue#58。长期以来,由于序列化 Errors 和其他非 POJO 对象的问题,Nuxt 一直使用我们自己的 devalue 分支,但我们现在已经过渡回原始版本。

您甚至可以使用新的对象语法 Nuxt 插件注册您自己的自定义类型

plugins/custom-payload-type.ts
export default definePayloadPlugin(() => {
  definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
  definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})

您可以在此处阅读更多关于其工作原理的信息。

🛝 交互式服务器组件

此功能应被视为高度实验性,但得益于 @huang-julien 的一些出色工作,我们现在通过*插槽*支持服务器组件内的交互式内容 (#20284)。

您可以在 #19772 中关注服务器组件路线图。

⏰ 环境配置

您现在可以在 nuxt.config 中配置完全类型化、按环境覆盖。

export default defineNuxtConfig({
  $production: {
    routeRules: {
      '/**': { isr: true }
    }
  },
  $development: {
    //
  }
})

如果您正在创作层,您还可以使用 $meta 键来提供您或您的层使用者可能使用的元数据。

阅读更多关于按环境覆盖的信息。

💪 完全类型化的页面

通过与 unplugin-vue-router 的实验性集成,您可以在 Nuxt 应用程序中受益于完全类型化的路由 - 感谢 @posva 的一些出色工作!

开箱即用,这将启用 navigateTo<NuxtLink>router.push() 等的类型化用法。

您甚至可以使用 const route = useRoute('route-name') 在页面中获取类型化参数。

直接在您的 nuxt.config 中启用此功能

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

🔎 “打包器”模块解析

我们现在在 Nuxt 中完全支持 模块解析bundler 策略。

如果可能,我们建议采用此方法。它支持子路径导出的类型,例如,但比 Node16 解析更准确地匹配 Vite 和 Nuxt 等构建工具的行为。

nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        moduleResolution: 'bundler'
      }
    }
  }
})

这开启了 TypeScript “遵循” Node 子路径导出的能力。 例如,如果一个库有一个类似 mylib/path 的子路径导出映射到 mylib/dist/path.mjs,那么此类型的类型可以从 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 生态系统中。

📃 完整变更日志

阅读 https://github.com/nuxt/nuxt/releases/tag/v3.5.0 上的完整发行说明

← 返回博客