构建器

源文件
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 配置的更多信息，请查阅 Vite 网站。

参数

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

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

属性类型必需描述
开发booleanfalse如果设置为 true，则在开发模式下构建时将调用回调函数。
构建booleanfalse如果设置为 true，则在生产模式下构建时将调用回调函数。
服务器booleanfalse如果设置为 true，则在构建服务器包时将调用回调函数。在 Nuxt 5+ 中已废弃。请改用带有 applyToEnvironment() 的 addVitePlugin()。
客户端booleanfalse如果设置为 true，则在构建客户端包时将调用回调函数。在 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，则在开发模式下构建时将调用回调函数。
构建booleanfalse如果设置为 true，则在生产模式下构建时将调用回调函数。
服务器booleanfalse如果设置为 true，则在构建服务器包时将调用回调函数。
客户端booleanfalse如果设置为 true，则在构建客户端包时将调用回调函数。
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 插件实例数组。

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

属性类型必需描述
开发booleanfalse如果设置为 true，则在开发模式下构建时将调用回调函数。
构建booleanfalse如果设置为 true，则在生产模式下构建时将调用回调函数。
服务器booleanfalse如果设置为 true，则在构建服务器包时将调用回调函数。在 Nuxt 5+ 中已废弃。请改用 applyToEnvironment()。
客户端booleanfalse如果设置为 true，则在构建客户端包时将调用回调函数。在 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 插件实例数组。

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

属性类型必需描述
开发booleanfalse如果设置为 true，则在开发模式下构建时将调用回调函数。
构建booleanfalse如果设置为 true，则在生产模式下构建时将调用回调函数。
服务器booleanfalse如果设置为 true，则在构建服务器包时将调用回调函数。
客户端booleanfalse如果设置为 true，则在构建客户端包时将调用回调函数。
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，则在开发模式下构建时将调用回调函数。
构建booleanfalse如果设置为 true，则在生产模式下构建时将调用回调函数。
服务器booleanfalse如果设置为 true，则在构建服务器包时将调用回调函数。
客户端booleanfalse如果设置为 true，则在构建客户端包时将调用回调函数。
prependbooleanfalse如果设置为 true，回调函数将使用 unshift() 而不是 push() 预添加到数组中。