功能

根据需要启用或禁用 Nuxt 的可选功能,以解锁新的可能性。

Nuxt 的一些功能可以在选择的基础上使用,或者可以根据你的需求被禁用。

features

inlineStyles

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

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

nuxt.config.ts
export default defineNuxtConfig({
  features: {
    inlineStyles: true // 或者一个函数来决定内联
  }
})

noScripts

禁用 Nuxt 脚本和 JS 资源提示的渲染。也可以在 routeRules 内部进行细粒度配置。

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

future

还有一个 future 命名空间,用于提前选择性地启用将在框架的将来(可能是一个主要版本)版本中成为默认值的新功能。

compatibilityVersion

这个配置选项在 Nuxt v3.12+ 中可用。

这为早期访问 Nuxt 特性或标志提供了可能性。

compatibilityVersion 设置为 4 会改变你的 Nuxt 配置中的默认设置,以选择性地启用 Nuxt v4 行为,但在测试时,你可以细粒度地重新启用 Nuxt v3 行为(参见示例)。如果遇到问题,请提交问题,以便我们可以解决 Nuxt 或生态系统中的问题。

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  // 为了重新启用所有的 Nuxt v3 行为,设置以下选项:
  srcDir: '.',
  dir: {
    app: 'app'
  },
  experimental: {
    scanPageMeta: 'after-resolve',
    sharedPrerenderData: false,
    compileTemplate: true,
    resetAsyncDataToUndefined: true,
    templateUtils: true,
    relativeWatchPaths: true,
    normalizeComponentNames: false
    defaults: {
      useAsyncData: {
        deep: true
      }
    }
  },
  unhead: {
    renderSSRHeadOptions: {
      omitLineBreaks: false
    }
  }
})

typescriptBundlerResolution

这为 TypeScript 启用了“打包器”模块解析模式,这是像 Nuxt 这样的框架和 Vite 推荐的设置。

它改善了在使用现代库时与 exports 一起使用的类型支持。

请参阅原始的 TypeScript 拉取请求

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