构建器

源文件
Nuxt Kit 提供了一套实用程序，可帮助您使用构建器。这些函数允许您扩展 Vite 和 webpack 的配置。

Nuxt 基于以下内容拥有构建器Vite等等webpack。您可以使用 extendViteConfig 和 extendWebpackConfig 函数来扩展传递给每个构建器的配置。您还可以通过 addVitePlugin、addWebpackPlugin 和 addBuildPlugin 添加其他插件。

extendViteConfig

扩展 Vite 配置。回调函数可以被调用多次，适用于客户端和服务器构建。

此 hook 现已弃用，我们建议改用带有 config hook 的 Vite 插件，或者——对于特定于环境的配置——使用 applyToEnvironment hook。

使用

import { defineNuxtModule, extendViteConfig } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    extendViteConfig((config) => {
      config.optimizeDeps ||= {}
      config.optimizeDeps.include ||= []
      config.optimizeDeps.include.push('cross-fetch')
    })
  },
})

对于 Nuxt 5+ 中的特定于环境的配置，请改用 addVitePlugin()

import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    // For global configuration (affects all environments)
    addVitePlugin(() => ({
      name: 'my-global-plugin',
      config (config) {
        // This runs before environment setup
        config.optimizeDeps ||= {}
        config.optimizeDeps.include ||= []
        config.optimizeDeps.include.push('cross-fetch')
      },
    }))

    // For environment-specific configuration
    addVitePlugin(() => ({
      name: 'my-client-plugin',
      applyToEnvironment (environment) {
        return environment.name === 'client'
      },
      configEnvironment (name, config) {
        // This only affects the client environment
        config.optimizeDeps ||= {}
        config.optimizeDeps.include ||= []
        config.optimizeDeps.include.push('client-only-package')
      },
    }))
  },
})
重要提示： config hook 在 applyToEnvironment 之前运行，并修改全局配置。使用 configEnvironment 进行特定于环境的配置更改。

类型

function extendViteConfig (callback: ((config: ViteConfig) => void), options?: ExtendViteConfigOptions): void
请查看 Vite 网站，了解有关其配置的更多信息。

参数

callback：一个回调函数，将使用 Vite 配置对象调用它。

options：要传递给回调函数的选项。此对象可以具有以下属性

属性类型必需描述
开发booleanfalse如果设置为 true，则在开发模式下构建时将调用回调函数。
buildbooleanfalse如果设置为 true，则在生产模式下构建时将调用回调函数。
服务器booleanfalse如果设置为 true，则在构建服务器 bundle 时将调用回调函数。在 Nuxt 5+ 中已弃用。 请改用带有 applyToEnvironment() 的 addVitePlugin()。
clientbooleanfalse如果设置为 true，则在构建客户端 bundle 时将调用回调函数。在 Nuxt 5+ 中已弃用。 请改用带有 applyToEnvironment() 的 addVitePlugin()。
prependbooleanfalse如果设置为 true，则回调函数将使用 unshift() 而不是 push() 预置到数组中。

extendWebpackConfig

扩展 webpack 配置。回调函数可以被调用多次，适用于客户端和服务器构建。

使用

import { defineNuxtModule, extendWebpackConfig } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    extendWebpackConfig((config) => {
      config.module!.rules!.push({
        test: /\.txt$/,
        use: 'raw-loader',
      })
    })
  },
})

类型

function extendWebpackConfig (callback: ((config: WebpackConfig) => void), options?: ExtendWebpackConfigOptions): void
请查看 webpack 网站，了解有关其配置的更多信息。

参数

callback：一个回调函数，将使用 webpack 配置对象调用它。

options：要传递给回调函数的选项。此对象可以具有以下属性

属性类型必需描述
开发booleanfalse如果设置为 true，则在开发模式下构建时将调用回调函数。
buildbooleanfalse如果设置为 true，则在生产模式下构建时将调用回调函数。
服务器booleanfalse如果设置为 true，则在构建服务器 bundle 时将调用回调函数。
clientbooleanfalse如果设置为 true，则在构建客户端 bundle 时将调用回调函数。
prependbooleanfalse如果设置为 true，则回调函数将使用 unshift() 而不是 push() 预置到数组中。

addVitePlugin

将 Vite 插件追加到配置中。

在 Nuxt 5+ 中，使用 server: false 或 client: false 选项注册的插件将不会调用它们的 config 或 configResolved hook。相反，请使用 applyToEnvironment() 方法进行特定于环境的插件配置。

使用

import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
import { svg4VuePlugin } from 'vite-plugin-svg4vue'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-svg-icons',
    configKey: 'nuxtSvgIcons',
  },
  defaults: {
    svg4vue: {
      assetsDirName: 'assets/icons',
    },
  },
  setup (options) {
    addVitePlugin(svg4VuePlugin(options.svg4vue))

    // or, to add a vite plugin to only one environment
    addVitePlugin(() => ({
      name: 'my-client-plugin',
      applyToEnvironment (environment) {
        return environment.name === 'client'
      },
      // ... rest of your client-only plugin
    }))
  },
})

类型

function addVitePlugin (pluginOrGetter: VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[]), options?: ExtendViteConfigOptions): void
请参阅Vite 网站了解有关 Vite 插件的更多信息。您还可以使用此仓库查找适合您需求的插件。

参数

pluginOrGetter：一个 Vite 插件实例或一个 Vite 插件实例数组。如果提供了函数，它必须返回一个 Vite 插件实例或一个 Vite 插件实例数组。该函数也可以是异步的或返回一个 Promise，这对于延迟加载插件很有用

import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    // Lazy load the plugin - only imported when the build actually runs
    addVitePlugin(() => import('my-vite-plugin').then(r => r.default()))
  },
})

options：要传递给回调函数的选项。此对象可以具有以下属性

属性类型必需描述
开发booleanfalse如果设置为 true，则在开发模式下构建时将调用回调函数。
buildbooleanfalse如果设置为 true，则在生产模式下构建时将调用回调函数。
服务器booleanfalse如果设置为 true，则在构建服务器 bundle 时将调用回调函数。在 Nuxt 5+ 中已弃用。 请改用 applyToEnvironment()。
clientbooleanfalse如果设置为 true，则在构建客户端 bundle 时将调用回调函数。在 Nuxt 5+ 中已弃用。 请改用 applyToEnvironment()。
prependbooleanfalse如果设置为 true，则回调函数将使用 unshift() 而不是 push() 预置到数组中。

addWebpackPlugin

将 webpack 插件追加到配置中。

使用

import EslintWebpackPlugin from 'eslint-webpack-plugin'
import { addWebpackPlugin, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-eslint',
    configKey: 'eslint',
  },
  defaults: nuxt => ({
    include: [`${nuxt.options.srcDir}/**/*.{js,jsx,ts,tsx,vue}`],
    lintOnStart: true,
  }),
  setup (options, nuxt) {
    const webpackOptions = {
      ...options,
      context: nuxt.options.srcDir,
      files: options.include,
      lintDirtyModulesOnly: !options.lintOnStart,
    }
    addWebpackPlugin(new EslintWebpackPlugin(webpackOptions), { server: false })
  },
})

类型

function addWebpackPlugin (pluginOrGetter: WebpackPluginInstance | WebpackPluginInstance[] | (() => WebpackPluginInstance | WebpackPluginInstance[]), options?: ExtendWebpackConfigOptions): void
请参阅webpack 网站了解有关 webpack 插件的更多信息。您还可以使用此集合查找适合您需求的插件。

参数

pluginOrGetter：一个 webpack 插件实例或一个 webpack 插件实例数组。如果提供了函数，它必须返回一个 webpack 插件实例或一个 webpack 插件实例数组。该函数也可以是异步的或返回一个 Promise，从而可以延迟加载插件。

options：要传递给回调函数的选项。此对象可以具有以下属性

属性类型必需描述
开发booleanfalse如果设置为 true，则在开发模式下构建时将调用回调函数。
buildbooleanfalse如果设置为 true，则在生产模式下构建时将调用回调函数。
服务器booleanfalse如果设置为 true，则在构建服务器 bundle 时将调用回调函数。
clientbooleanfalse如果设置为 true，则在构建客户端 bundle 时将调用回调函数。
prependbooleanfalse如果设置为 true，则回调函数将使用 unshift() 而不是 push() 预置到数组中。

addBuildPlugin

addVitePlugin 和 addWebpackPlugin 的与构建器无关的版本。如果存在 Vite 和 webpack 配置，它将把插件添加到这两个配置中。

类型

function addBuildPlugin (pluginFactory: AddBuildPluginFactory, options?: ExtendConfigOptions): void

参数

pluginFactory：一个工厂函数，返回一个具有 vite 和/或 webpack 属性的对象。这些属性必须是返回 Vite 插件实例或 Vite 插件实例数组以及/或者 webpack 插件实例或 webpack 插件实例数组的函数。

options：要传递给回调函数的选项。此对象可以具有以下属性

属性类型必需描述
开发booleanfalse如果设置为 true，则在开发模式下构建时将调用回调函数。
buildbooleanfalse如果设置为 true，则在生产模式下构建时将调用回调函数。
服务器booleanfalse如果设置为 true，则在构建服务器 bundle 时将调用回调函数。
clientbooleanfalse如果设置为 true，则在构建客户端 bundle 时将调用回调函数。
prependbooleanfalse如果设置为 true，则回调函数将使用 unshift() 而不是 push() 预置到数组中。