Nuxt.js v2.4.0 发布！新增 TypeScript、智能预取等功能……

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

您也可以在 GitHub 上查看此版本说明：https://github.com/nuxt/nuxt.js/releases/tag/v2.4.0

重要消息👀

新核心团队成员🐤

我们非常荣幸地宣布 Kevin Marrec ( @kevinmarrec ) 加入 Nuxt.js 核心团队。他来自法国🇫🇷，负责 TypeScript 集成💚

官方咨询⛑

我们现在提供来自核心团队的官方支持和咨询服务。我们与 Otechie 合作开展这项工作，并已与部分公司进行了 Beta 测试。

你感兴趣或好奇吗？
访问https://otechie.com/nuxt了解更多信息🙌

RFC流程📎

我们邀请您查看我们的nuxt/rfcs代码库，我们在那里讨论了 Nuxt 的未来及其愿景。

如果您想了解更多关于 Nuxt 即将发生的变化，这里有一些有趣的建议：

• 默认启用 Nuxt 的全静态生成模式，以生成可离线使用的静态网站。
• Fabula，一款受 Vue/Nuxt 启发的工具，用于在本地和远程主机上运行任务。
• 改进 @nuxt/config 包，使其支持config/目录和自动补全功能
• Nuxt Workers将在服务器端开启更多可能性（集群、PM2 集成、服务器端 HMR 等）
• 模块改进，赋予 Nuxt 模块更强大的功能
• 还有更多💚

发布计划🚢

从本次发布开始，Nuxt 将遵循一套正式的发布计划（力求完善）。此外，旧版本的主要生命周期终止计划已在RELEASE_PLAN.md 文件中定义。

简要总结：

• Nuxt 的主要版本计划每 6 个月发布一次。
• Nuxt.js 小版本发布周期大约为 4 周。
• 修复程序将在实际提交 PR/commit 后尽快发布。

我们强烈建议您阅读RELEASE_PLAN.md文件以了解更多详情。

谢谢你❤️

我们特别感谢：

• 我们的贡献者提交错误报告、功能请求并对问题发表评论。
• 我们的用户在我们的Discord 服务器上参与互动，并通过提及我们的Twitter 账号来表达喜爱之情。
• 所有在使用 Nuxt.js 的公司工作的开发人员，以及帮助我​​们构建案例展示列表的开发者们
• 我们的支持者和赞助商通过我们的开放集体在经济上支持我们。

新功能✨

说到TypeScript……

TypeScript 支持已上线！

为了在 TypeScript 环境下运行 Nuxt，我们创建了一个新的发行版，名为nuxt-ts（我们还有nuxt-ts-edge）。
感谢@hmsk在 npm 上捐赠了该包名 ❤️

您可以探索Nuxt TypeScript 示例，或者直接在我们的Nuxt TS CodeSandBox中使用它。

对于更高级的示例，您可以查看HackerNews-TS 仓库或在CodeSandBox上进行尝试，该仓库由@husayt和@kevinmarrec制作。

这项工作由@kevinmarrec完成，并得到了@pi0和@atinux的帮助。

⚠️实验性功能：我们正在等待您的反馈以持续改进，因此可能会出现不兼容的变更，而无需发布主版本更新。但是，所有变更都会有相应的文档说明。

智能预取⚡️

<nuxt-link>Nuxt.js 默认会在视口中显示时自动预取链接的代码分割页面。这极大地提升了最终用户的使用体验，其灵感来源于quicklink。

GIF

我们已在线提供演示，建议您亲自体验，感受其中的不同：

• 不支持预取（v2.3）：https://nuxt-no-prefetch.surge.sh
• 启用预取功能（v2.4）：https://nuxt-prefetch.surge.sh

额外功能：我们添加了响应式$nuxt.isOnline功能$nuxt.isOffline，因此您可以直接在组件中使用它（请参阅此示例）。

您可以在相关的 PR #4574 和文档中了解更多关于此功能的信息。

HMR 及最佳实践store/👀

通过对商店（mutations、、getters和actions）提供完整的 HMR 支持，节省更多开发时间。

GIF

此功能已由@mannil和@atinux在 PR #4589、#4582 和 #4791 中实现。

VS Code 自动补全功能（通过 Vetur 扩展）✅

如果您使用的是 VS Code，那么在这个版本中，您现在可以为 Nuxt.js 组件启用自动完成功能：

GIF

此功能已由@octref和@atinux在 PR #4524 中实现。

端口被占用了？Nuxt 为你保驾护航！💪

如果 Nuxt 想要监听的端口已被占用，它会在开发过程中发出警告，并改用空闲端口进行监听：

在生产环境中，它会抛出错误以避免出现意外行为：

此功能由@ricardogobbosouza在 PR #4428 中实现，@pi0和@mannil也参与其中。

建议安装缺失的依赖项或不匹配的依赖项💯

为了方便使用，Nuxt 要求所有同级依赖项都必须作为依赖项。有时，当用户在 package.json 文件中显式添加与 Nuxt 不兼容的特定版本时，会导致一些意想不到的行为。这也有助于解决常见的 Vue 包版本不匹配错误（#198、#669、#1084、#1414、#1851、#2079、#2406、#3454）。

Nuxt 现在能够自动验证已安装的依赖项，并在检测到问题时发出适当的警告消息。

此功能已由@pi0在 PR #4669 中实现。

自动检测现代捆绑包🥇

运行时nuxt start，Nuxt 会自动检测您是否启用了现代模式构建应用。无需nuxt start --modern再显式运行命令🌟

此检测由@clarkdo在 PR #4422 中创建。

插件模式和文件扩展名💅

之前，您可以ssr: false在插件声明中使用 `--disable-server-side-render` 来禁用服务器端渲染。我们决定弃用该选项，并引入 `--disable-server-side-render` 选项mode，该选项可以是 ` 'all'--disable -server-side-render`、`--disable-server-side-render`'client'或'server'`--disable-server-side-render`。不用担心，` ssr--disable-server-side-render` 仍然有效（直到 Nuxt 3）。

新增功能是mode可以通过文件后缀来定义它：

• plugins/plugin.server.js
• plugins/plugin.client.js
• plugins/plugin.js

通过将插件添加到您的nuxt.config.js：

plugins: [
  '~/plugins/plugin.server.js',
  '~/plugins/plugin.client.js',
  '~/plugins/plugin.js'
]

该声明将在内部转换为：

plugins: [
  { mode: 'server', src: '~/plugins/plugin.server.js' },
  { mode: 'client', src: '~/plugins/plugin.client.js' },
  { mode: 'all', src: '~/plugins/plugin.js' }
]

（如果手动指定mode，将会覆盖后缀检测结果）

此功能已由@clarkdo在 PR #4592 中实现。

模块命令🖥

Nuxt 模块现在可以包含binNuxt CLI 可识别的脚本。

以下是一个例子my-module/bin/command.js：

#!/usr/bin/env node

const consola = require('consola')
const { NuxtCommand } = require('@nuxt/cli')

NuxtCommand.run({
  name: 'command',
  description: 'My Module Command',
  usage: 'command <foobar>',
  options: {
    foobar: {
      alias: 'fb',
      type: 'string',
      description: 'Simple test string'
    }
  },
  run(cmd) {
    consola.info(cmd.argv)
  }
})

可以使用以下方式运行该命令：

npx nuxt command arg1 arg2

您可以在模块命令文档中了解更多相关信息。

⚠️实验性功能：我们正在等待您的反馈以持续改进，因此可能会出现不完整的变更，而无需发布主版本更新。但是，所有变更都会有详细的文档说明 <3

此功能由@galvez在 PR #4314 中实现，@pi0也参与其中。

Vue 组件中的 PostCSS 💃

现在你可以lang="postcss"在 Vue 组件中使用它了。Postcss 已经应用了所有样式（例如，解析别名~），但该lang属性可以为某些 IDE 启用自动完成和语法高亮显示功能。

此功能已由@mannil在 PR #4417 中实现。

不再需要样式表扩展程序了🦅

GIF

我们致力于在每次版本更新中提升开发者体验 (DX)。这项小小的改动允许您省略 CSS/SCSS/Postcss/Less/Stylus 等文件扩展名，这些文件列在css您的配置文件数组中nuxt.config.js。对于 ` pluginsor`serverMiddleware键，此功能已经可用。

此功能已由@mannil在 PR #4671 中实现。

SSR 捆绑包改进🔹

我们完全重写了 SSR 包的打包方式。

这意味着更好的性能、更少的内存开销、更少的内存溢出崩溃以及更容易的 SSR 包调试。

此功能已由@pi0在 PR #4439 中实现。

其他变化🌔

• process.modern可用于区分现代环境。
• 添加server.timingServer-Timing 标头，用于监控和性能概览（PR #4800）
• ⚠️ 实验性功能：HardSourceWebpackPlugin通过hardSource: true以下hardSource方式启用nuxt.config.js
• 现在可以在页面中scrollToTop进行设置false（PR #4564）
• nuxt-link和nuxt-child（n-link和）的别名n-child现已可用（PR #4525）
• 现在可以使用PascalCaseVue 风格指南推荐的组件了（PR #4396）
• headAttrsappTemplate 现在支持VueMetas （PR #4536）
• 更多浏览器已添加到现代浏览器列表中（PR #4516，PR #4775）
• 已加载的资源现在可以拥有一个crossorigin属性（PR #4472）
• 现代模式资源已预加载，如果已设置，将通过 HTTP2 服务器推送进行推送（PR #4508）。
• 添加禁用compression中间件的选项（PR #4381）
• 添加禁用FriendlyErrorsWebpackPlugin叠加层的选项（PR #4381）
• 添加exclude选项，允许将页面排除generated在静态模式之外，但仍通过回退/SPA 进行渲染（PR #4754）
• 支持build.hotMiddleware.client（PR #4796）
• 新增了一些示例：
  • styled-vue（PR #4712）
  • 哈巴狗（PR #4409）
• 内部变化：
  • 功能：runInNewContext: true用于 Nuxt 开发 (#4508)
  • 新增功能：在现代模式下检查现代构建文件（#4467）
  • 重构：迁移到 extract-css-chunks-webpack-plugin (#4495)

更多补丁（30+）🔍

• hotfix(vue-app): 路由更改时传递了 ReferenceError 错误（PR #4444）
• 修复（vue-app）：正确序列化 head 函数（PR #4558 #4585）
• 修复（vue-app）：在布局中middleware使用时处理不正确Vue.extend（修复 #4724）
• 修复（vue-renderer）：移除undefined现代模式和生成的脚本（https://github.com/nuxt/nuxt.js/commit/0a21d4b34ca2f3bde2a54452f3d6831a0b1ee362）
• 修复：添加在原始文件系统事件发生后重新监视路径的选项（PR #4717）
• 修复（构建器，模块）：addLayout 和 nuxt.config 优先于自动扫描的布局（PR #4702）
• 修复：支持带有目录和 index.js 的插件（PR #4714）
• 修复：对 webpack 加载器规则使用不区分大小写的正则表达式（PR #4728）
• 修复：通过解析器引入 postcss 模块（PR #4737）
• 修复：Safari 修复程序未注入到客户端现代模式中（https://github.com/nuxt/nuxt.js/commit/ecf76d91f1bec8dcab8f2c7715e0e07a19d0b6fe）
• 修复（服务器）：允许渲染包含 Unicode 字符的 URL (#4512)
• 修复（构建器）：在模板中添加 lodash（PR #4368）
• 修复：当值为假时回退到默认值publicPath（PR #4365）
• 修复：modern=true 或 false 未按预期工作（PR #4378）
• 修复：开发模式下的空错误消息（https://github.com/nuxt/nuxt.js/commit/3d990fe60675f44a1771b765a73d9bbe5d5fa8f8）
• 修复（进度条）：允许值为 0 并移除重复的默认值（PR #4397）
• 修复（vue-app）：允许向错误函数传递自定义 props（PR #4462）
• 修复(webpack): 在调用 extendConfig 之前执行 deepClone (PR #4464)
• 修复（vue-app）：在 extendRoutes 中 router.meta 为空（PR #4478）
• 修复：将 route.meta 合并到 options.meta 中（PR #4479）
• 修复：改进构建和开发稳定性（PR #4470）
• fix(vue-app): 修复路由元数据以处理顺序（https://github.com/nuxt/nuxt.js/commit/45be6384794fa5239b27ade8966d5d40955d8bb7）
• 修复（开发）：当 webpack 监视文件更改时显示正确的路径（https://github.com/nuxt/nuxt.js/commit/25dea5f52a30628c43213fdc6d620c0d0eda8d9d）
• 修复(webpack): 允许使用 extend 更改 devtool (PR #4515)
• 修复：keepAliveProps 在 (PR #4521) 中存在问题
• 修复：使用自定义脚本源规则时，csp SHA 哈希值会累积（#4519）
• 修复：extractCSS 中重复样式 (#4546)
• 修复：现代模式下的 HMR 问题 (#4623)
• 修复：非现代开发模式下的 devMiddleware 错误（https://github.com/nuxt/nuxt.js/commit/35151150fde5ad21087f14bf22cf1acf0f150979）
• 修复(ts): 修复$nuxt.$loadingtypedefs (#4778)
• 修复：loading向组件选项添加缺失属性（#4786）
• 修复：在转译过程中匹配 node_module 下的子目录 (#4850)

升级须知⚠️

由于已知问题（webpack/webpack#8656、#4869、#4839），npm用户应该package-lock.json在升级前卸载并重新安装，或者npm update acorn --depth 20 && npm dedupe在升级到 2.4.0 后再使用。yarn用户应该不会有问题，但yarn.lock仍然建议在升级过程之前卸载。