实验性功能

请注意，这些功能尚处于实验阶段，未来可能会被移除或修改。

export default defineNuxtConfig({
  experimental: {
    asyncContext: true
  }
})

export default defineNuxtConfig({
  experimental: {
    asyncEntry: true
  }
})

export default defineNuxtConfig({
  experimental: {
    externalVue: true
  }
})

export default defineNuxtConfig({
  experimental: {
    emitRouteChunkError: 'automatic' // or 'automatic-immediate', 'manual' or false
  }
})

export default defineNuxtConfig({
  experimental: {
    restoreState: true
  }
})

export default defineNuxtConfig({
  experimental: {
    inlineRouteRules: true
  }
})

export default defineNuxtConfig({
  experimental: {
    renderJsonPayloads: true
  }
})

export default defineNuxtConfig({
  experimental: {
    noVueServer: true
  }
})

export default defineNuxtConfig({
  experimental: {
    payloadExtraction: true
  }
})

export default defineNuxtConfig({
  experimental: {
    clientFallback: true
  }
})

export default defineNuxtConfig({
  experimental: {
    crossOriginPrefetch: true
  }
})

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  }
})

export default defineNuxtConfig({
  experimental: {
    writeEarlyHints: true
  }
})

export default defineNuxtConfig({
  experimental: {
    componentIslands: true // false or 'local+remote'
  }
})

export default defineNuxtConfig({
  experimental: {
    localLayerAliases: true
  }
})

export default defineNuxtConfig({
  experimental: {
    typedPages: true
  }
})

export default defineNuxtConfig({
  experimental: {
    watcher: 'chokidar-granular' // 'chokidar' or 'parcel' are also options
  }
})

export default defineNuxtConfig({
  experimental: {
    sharedPrerenderData: true
  }
})

// This would be unsafe in a dynamic page (e.g. `[slug].vue`) because the route slug makes a difference
// to the data fetched, but Nuxt can't know that because it's not reflected in the key.
const route = useRoute()
const { data } = await useAsyncData(async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})
// Instead, you should use a key that uniquely identifies the data fetched.
const { data } = await useAsyncData(route.params.slug, async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})

要使像 Buffer 这样的全局变量在浏览器中工作，你需要手动注入它们。 ```ts import { Buffer } from 'node:buffer'globalThis.Buffer = globalThis.Buffer || Buffer

cookieStore

启用 CookieStore 支持，以监听 Co​​okie 更新（如果浏览器支持）并刷新 useCookie 引用值。¥Enables CookieStore support to listen for cookie updates (if supported by the browser) and refresh useCookie ref values.:了解更多关于 CookieStore 的信息。¥Read more about the CookieStore.::

buildCache

基于配置和源文件的哈希值缓存 Nuxt 构建工件。¥Caches Nuxt build artifacts based on a hash of the configuration and source files.启用后，对以下文件的更改将触发完全重建：¥When enabled, changes to the following files will trigger a full rebuild:此外，对 srcDir 内文件的任何更改都将触发 Vue 客户端/服务器包的重建。Nitro 将始终重建（尽管正在进行允许 Nitro 声明其可缓存的构件及其哈希值的工作）。¥In addition, any changes to files within srcDir will trigger a rebuild of the Vue client/server bundle. Nitro will always be rebuilt (though work is in progress to allow Nitro to announce its cacheable artifacts and their hashes).

extraPageMetaExtractionKeys

definePageMeta() 宏是收集页面构建时元数据的有效方法。Nuxt 本身提供了一组受支持的键列表，用于支持一些内部功能，例如重定向、页面别名和自定义路径。¥The definePageMeta() macro is a useful way to collect build-time meta about pages. Nuxt itself provides a set list of supported keys which is used to power some of the internal features such as redirects, page aliases and custom paths.此选项允许在使用 scanPageMeta 时传递额外的键以从页面元数据中提取。¥This option allows passing additional keys to extract from the page metadata when using scanPageMeta.这允许模块在构建上下文中从页面元数据访问其他元数据。如果你在模块中使用它，也建议使用 使用你的键值扩充 NuxtPage 类型。¥This allows modules to access additional metadata from the page metadata in the build context. If you are using this within a module, it's recommended also to augment the NuxtPage types with your keys.

normalizeComponentNames

确保自动生成的 Vue 组件名称与用于自动导入组件的完整组件名称匹配。¥Ensure that auto-generated Vue component names match the full component name you would use to auto-import the component.默认情况下，如果你未手动设置，Vue 将分配一个与组件文件名匹配的组件名称。¥By default, if you haven't set it manually, Vue will assign a component name that matches the filename of the component.在这种情况下，就 Vue 而言，组件名称将是 MyComponent。如果你想将 <KeepAlive> 与它一起使用，或者在 Vue DevTools 中识别它，则需要使用此组件。¥In this case, the component name would be MyComponent, as far as Vue is concerned. If you wanted to use <KeepAlive> with it, or identify it in the Vue DevTools, you would need to use this component.但为了自动导入它，你需要使用 SomeFolderMyComponent。¥But in order to auto-import it, you would need to use SomeFolderMyComponent.通过设置 experimental.normalizeComponentNames，这两个值将匹配，Vue 将生成一个与 Nuxt 组件命名模式匹配的组件名称。¥By setting experimental.normalizeComponentNames, these two values match, and Vue will generate a component name that matches the Nuxt pattern for component naming.

spaLoadingTemplateLocation

在渲染纯客户端页面（使用 ssr: false）时，我们可选择渲染一个加载屏幕（来自 app/spa-loading-template.html）。¥When rendering a client-only page (with ssr: false), we optionally render a loading screen (from app/spa-loading-template.html).可以将其设置为 within，这样会将其渲染成如下形式：¥It can be set to within, which will render it like this:或者，你可以将模板设置为 body，使其与 Nuxt 应用根目录一起渲染：¥Alternatively, you can render the template alongside the Nuxt app root by setting it to body:这避免了在客户端页面加载时出现白色闪烁。¥This avoids a white flash when hydrating a client-only page.

browserDevtoolsTiming

在浏览器开发者工具中启用 Nuxt hooks 的性能标记。这会添加性能标记，你可以在基于 Chromium 的浏览器的“性能”选项卡中跟踪这些标记，这对于调试和优化性能非常有用。¥Enables performance markers for Nuxt hooks in browser devtools. This adds performance markers that you can track in the Performance tab of Chromium-based browsers, which is useful for debugging and optimizing performance.此功能在开发模式下默认启用。如果你需要禁用此功能，可以执行以下操作：¥This is enabled by default in development mode. If you need to disable this feature, it is possible to do so::有关实现详情，请参阅 PR #29922。¥See PR #29922 for implementation details.:::了解更多关于 Chrome DevTools 性能 API 的信息。¥Learn more about Chrome DevTools Performance API.::

debugModuleMutation

在模块上下文中记录 nuxt.options 的变更，帮助调试模块在 Nuxt 初始化阶段所做的配置更改。¥Records mutations to nuxt.options in module context, helping to debug configuration changes made by modules during the Nuxt initialization phase.启用 debug 模式后，此功能默认启用。如果你需要禁用此功能，可以执行以下操作：¥This is enabled by default when debug mode is enabled. If you need to disable this feature, it is possible to do so:要显式启用它：¥To enable it explicitly::有关实现详情，请参阅 PR #30555。¥See PR #30555 for implementation details.::

lazyHydration

这将为 <Lazy> 组件启用混合策略，通过将组件的混合推迟到需要它们时来提高性能。¥This enables hydration strategies for <Lazy> components, which improves performance by deferring hydration of components until they're needed.惰性加载默认启用，但你可以禁用此功能：¥Lazy hydration is enabled by default, but you can disable this feature::了解更多关于惰性加载的信息。¥Read more about lazy hydration.::

templateImportResolution

控制如何解析 Nuxt 模板中的导入。默认情况下，Nuxt 会尝试解析模板中相对于添加它们的模块的导入。¥Controls how imports in Nuxt templates are resolved. By default, Nuxt attempts to resolve imports in templates relative to the module that added them.此功能默认启用，因此如果你在某些环境中遇到解析冲突，可以禁用此行为：¥This is enabled by default, so if you're experiencing resolution conflicts in certain environments, you can disable this behavior::有关实现细节，请参阅 PR #31175。¥See PR #31175 for implementation details.::

decorators

此选项允许在整个 Nuxt/Nitro 应用中启用装饰器语法，该应用由 esbuild 提供支持。¥This option enables enabling decorator syntax across your entire Nuxt/Nitro app, powered by esbuild.长期以来，TypeScript 一直通过 compilerOptions.experimentalDecorators 支持装饰器。此实现早于 TC39 标准化过程。现在，装饰器是 第三阶段提案，并且在 TS 5.0+ 中无需特殊配置即可支持（参见 https://github.com/microsoft/TypeScript/pull/52582 和 https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/#decorators）。¥For a long time, TypeScript has had support for decorators via compilerOptions.experimentalDecorators. This implementation predated the TC39 standardization process. Now, decorators are a Stage 3 Proposal, and supported without special configuration in TS 5.0+ (see https://github.com/microsoft/TypeScript/pull/52582 and https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/#decorators).启用 experimental.decorators 可支持 TC39 提案，而非 TypeScript 之前的 compilerOptions.experimentalDecorators 实现。¥Enabling experimental.decorators enables support for the TC39 proposal, NOT for TypeScript's previous compilerOptions.experimentalDecorators implementation.

用法

¥Usage

purgeCachedData

Nuxt 将自动清除 useAsyncData 和 nuxtApp.static.data 中的缓存数据。这有助于防止内存泄漏并确保在需要时加载新数据，但可以禁用它：¥Nuxt will automatically purge cached data from useAsyncData and nuxtApp.static.data. This helps prevent memory leaks and ensures fresh data is loaded when needed, but it is possible to disable it::有关实现细节，请参阅 PR #31379。¥See PR #31379 for implementation details.::

granularCachedData

在刷新 useAsyncData 和 useFetch 的数据时，是否调用并使用 getCachedData 的结果（无论是通过 watch、refreshNuxtData() 还是手动调用 refresh()）。¥Whether to call and use the result from getCachedData when refreshing data for useAsyncData and useFetch (whether by watch, refreshNuxtData(), or a manual refresh() call.:有关实现细节，请参阅 PR #31373。¥See PR #31373 for implementation details.::

pendingWhenIdle

如果设置为 false，则从 useAsyncData、useFetch、useLazyAsyncData 和 useLazyFetch 返回的 pending 对象将是一个计算属性，仅当 status 也处于待处理状态时，该属性才为 true。¥If set to false, the pending object returned from useAsyncData, useFetch, useLazyAsyncData and useLazyFetch will be a computed property that is true only when status is also pending.这意味着当 immediate: false 被传递时，pending 将为 false，直到发出第一个请求。¥That means that when immediate: false is passed, pending will be false until the first request is made.