---
title: "功能"
description: "启用或禁用可选的 Nuxt 功能以解锁新可能性。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/guide/going-further/features"
---
# 功能

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

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

## `features`

### devLogs

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

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

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

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

### inlineStyles

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

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

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

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

### noScripts

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

可用值：

- `false`（默认值）：脚本正常渲染。
- `'production'`（或 `true`，会被规范化为 `'production'`）：仅在生产构建中省略脚本，因此热模块替换和其他开发功能仍可在 `nuxt dev` 中正常工作。
- `'all'`：在开发和生产环境中均省略脚本。

不含脚本的页面会通过整页加载进行导航。为了保持导航速度，Nuxt 会在这些页面上输出一个 [推测规则](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) 标签，以便支持该功能的浏览器在用户点击链接前预获取并预渲染目标页面。该标签是声明式 JSON，不会执行 JavaScript。这些规则的作用范围限定为页面路由（这些路由可以安全地使用 `GET` 请求），而不是所有同源链接，因此指向 `/logout` 等服务器路由的链接永远不会被推测性获取。全匹配页面（例如 `pages/[...slug].vue`）会匹配所有路径，从而将作用范围扩大回所有同源链接。

客户端向受 `noScripts` 路由规则覆盖的路由进行导航时，会改为触发完整的文档加载，因此该路由确实会在不含脚本的情况下提供服务，而不是由客户端路由器渲染。在构建时已知其路由受此类规则覆盖的页面，也会被完全排除在客户端 bundle 之外。

包含脚本的页面会输出自己的推测规则标签，其作用范围限定为 `noScripts` 路由模式，因此浏览器可以在向这些页面进行整页导航前预获取并预渲染目标页面。启用视图过渡时，这些页面还会选择加入声明式跨文档视图过渡，以便为导航添加动画效果。

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  features: {
    noScripts: 'production', // 或 'all' | false
  },
})
```

你也可以使用 `noScripts` [路由规则](https://nuxt.zhcndoc.com/docs/4.x/guide/concepts/rendering#hybrid-rendering) 按路由禁用脚本，该规则在所有模式下均适用：

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

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

- Nuxt 入口 `<script>` 标签
- 入口代码块的导入映射
- 内联的 payload `<script>`（启用 payload 提取时，还包括 payload 预加载链接）
- JavaScript 资源提示（JavaScript 代码块的 `preload` 和 `prefetch` 链接）

CSS 不受影响：样式表链接和内联样式仍会渲染，因此页面外观保持不变。页面只是不再进行 hydration，这意味着其中的任何内容都无法交互。

需要注意以下几点交互影响：

- 应用 `noScripts` 路由规则的路由始终使用缓冲（非流式）渲染器进行渲染。
- [服务器组件](https://nuxt.zhcndoc.com/docs/4.x/guide/concepts/server-components) 仅渲染静态 HTML 时可以正常工作，但使用 `nuxt-client` 进行 hydration 的组件和交互式岛槽依赖内联脚本来重新定位传送的内容，因此它们在 `noScripts` 路由上无法实现交互。当 `features.noScripts` 应用于整个应用且组件岛处于启用状态时，Nuxt 也会因此退回到缓冲渲染。

<read-more to="https://nuxt.zhcndoc.com/docs/4.x/guide/recipes/mostly-static-sites">

请参阅近乎静态站点方案，了解如何将 `noScripts` 与预渲染、岛和延迟 hydration 结合使用。

</read-more>

## `future`

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

### compatibilityVersion

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

将 `compatibilityVersion` 设置为 `5`，会更改 Nuxt 配置中的默认值，以启用 Nuxt v5 的行为，包括启用 [Vite Environment API](https://nuxt.zhcndoc.com/docs/4.x/guide/going-further/experimental-features#viteenvironmentapi)。

```ts
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 5,
  },
})
```

<read-more to="https://nuxt.zhcndoc.com/docs/4.x/getting-started/upgrade#testing-nuxt-5">

进一步了解如何测试 Nuxt 5。

</read-more>

### multiApp

此项启用对实验性多应用支持的早期访问。你可以关注 [跟踪 issue #21635](https://github.com/nuxt/nuxt/issues/21635) 以查看 Nuxt 多应用支持的进展。

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

### typescriptBundlerResolution

此项为 TypeScript 启用“Bundler”模块解析模式，这是针对像 Nuxt 和 [Vite](https://vite.zhcndoc.com/guide/performance#reduce-resolve-operations) 这样的框架推荐的设置。

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

参见 [原始的 TypeScript pull request](https://github.com/microsoft/TypeScript/pull/51669)。

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

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


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.