功能

启用或禁用可选的 Nuxt 功能以解锁新可能性。

Nuxt 的某些功能以选择性启用的方式提供，或可根据你的需要被禁用。

features

devLogs

在开发时将服务器日志流式传输到客户端。这些日志可以在 dev:ssr-logs 钩子中处理。

默认情况下，在开发模式启用（当测试模式未激活时）。

如果设置为 silent，日志将不会打印到浏览器控制台。

nuxt.config.ts
export default defineNuxtConfig({
  features: {
    devLogs: true,
  },
})

inlineStyles

在渲染 HTML 时内联样式。目前仅在使用 Vite 时可用。

你也可以传入一个函数，该函数接收 Vue 组件的路径并返回一个布尔值来指示是否为该组件内联样式。

默认值为 (id) => id.includes('.vue')。

nuxt.config.ts
export default defineNuxtConfig({
  features: {
    inlineStyles: false, // 或一个用于确定是否内联的函数
  },
})

noScripts

关闭 Nuxt 脚本和 JavaScript 资源提示的渲染，使页面以纯 HTML 和 CSS 形式输出。

可选值：

  • false（默认）：正常渲染脚本。
  • 'production'（或 true，会被规范化为 'production'）：仅在生产构建中省略脚本，因此 nuxt dev 中的热模块替换和其他开发功能仍可正常工作。
  • 'all'：在开发和生产环境中都省略脚本。
nuxt.config.ts
export default defineNuxtConfig({
  features: {
    noScripts: 'production', // 或 'all' | false
  },
})

你也可以使用 noScripts 路由规则 按路由禁用脚本，该规则适用于所有模式：

nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/blog/**': { noScripts: true },
  },
})

当 noScripts 应用于已渲染页面时，HTML 中会省略以下内容：

  • Nuxt 入口 <script> 标签
  • 入口 chunk 的 import map
  • 内联的 payload <script>（如果启用了 payload 提取，还会省略 payload 预加载链接）
  • JavaScript 资源提示（JS chunk 的 preload 和 prefetch 链接）

CSS 不受影响：样式表链接和内联样式仍然会被渲染，因此页面看起来完全相同。页面只是不会进行 hydration，这意味着其上的任何内容都不会具备交互性。

需要注意的几个交互：

  • 带有 noScripts 路由规则的路由始终使用缓冲式（非流式）渲染器渲染。
  • 仅渲染静态 HTML 的 服务端组件 可以正常工作，但使用 nuxt-client hydration 的组件以及交互式岛屿插槽依赖内联脚本来重新定位 teleported 内容，因此它们在 noScripts 路由上不会变得可交互。当 features.noScripts 在应用范围内设置且组件岛屿处于活动状态时，Nuxt 也会因此回退到缓冲式渲染。
有关将 noScripts 与预渲染、岛屿和懒加载 hydration 结合使用，请参阅大多静态站点配方。

future

还有一个 future 命名空间，用于提前选择启用将在未来（可能是重大）版本中成为默认值的新功能。

compatibilityVersion

这使得可以提前访问 Nuxt 的功能或标志。

将 compatibilityVersion 设置为 5 会在您的 Nuxt 配置中更改默认值，以选择 Nuxt v5 的行为，包括启用 Vite 环境 API。

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 5,
  },
})
了解更多关于测试 Nuxt 5 的信息。

multiApp

此项启用对实验性多应用支持的早期访问。你可以关注 tracker issue #21635 以查看 Nuxt 多应用支持的进展。

nuxt.config.ts
export default defineNuxtConfig({
  future: {
    multiApp: true,
  },
})

typescriptBundlerResolution

此项为 TypeScript 启用“Bundler”模块解析模式，这是针对像 Nuxt 和 Vite 这样的框架推荐的设置。

在使用带有 exports 的现代库时，它可以改进类型支持。

参见 原始的 TypeScript pull request。

你可以将其设置为 false 以使用旧的“Node”模式，这是 TypeScript 的默认设置。

nuxt.config.ts
export default defineNuxtConfig({
  future: {
    typescriptBundlerResolution: false,
  },
})