构建器
Nuxt 有基于 Vite 和 webpack 的构建器。您可以使用 extendViteConfig
和 extendWebpackConfig
函数扩展传递给它们的配置。您还可以通过 addVitePlugin
、addWebpackPlugin
和 addBuildPlugin
添加额外的插件。
extendViteConfig
扩展 Vite 配置。回调函数可以被多次调用,应用于客户端和服务器构建。
用法
import { defineNuxtModule, extendViteConfig } from '@nuxt/kit'
export default defineNuxtModule({
setup () {
extendViteConfig((config) => {
config.optimizeDeps ||= {}
config.optimizeDeps.include ||= []
config.optimizeDeps.include.push('cross-fetch')
})
},
})
类型
function extendViteConfig (callback: ((config: ViteConfig) => void), options?: ExtendViteConfigOptions): void
参数
callback
:将被调用并传入 Vite 配置对象的回调函数。
options
:传递给回调函数的选项对象。该对象可以包含以下属性:
属性 | 类型 | 必须 | 描述 |
---|---|---|---|
dev | boolean | false | 如果设置为 true ,回调函数将在开发模式构建时被调用。 |
build | boolean | false | 如果设置为 true ,回调函数将在生产模式构建时被调用。 |
server | boolean | false | 如果设置为 true ,回调函数将在构建服务器包时被调用。 |
client | boolean | false | 如果设置为 true ,回调函数将在构建客户端包时被调用。 |
prepend | boolean | false | 如果设置为 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
参数
callback
:将被调用并传入 webpack 配置对象的回调函数。
options
:传递给回调函数的选项对象。该对象可以包含以下属性:
属性 | 类型 | 必须 | 描述 |
---|---|---|---|
dev | boolean | false | 如果设置为 true ,回调函数将在开发模式构建时被调用。 |
build | boolean | false | 如果设置为 true ,回调函数将在生产模式构建时被调用。 |
server | boolean | false | 如果设置为 true ,回调函数将在构建服务器包时被调用。 |
client | boolean | false | 如果设置为 true ,回调函数将在构建客户端包时被调用。 |
prepend | boolean | false | 如果设置为 true ,回调函数将使用 unshift() 被添加至数组头部,而非使用 push() 添加至数组尾部。 |
addVitePlugin
向配置追加 Vite 插件。
用法
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))
},
})
类型
function addVitePlugin (pluginOrGetter: VitePlugin | VitePlugin[] | (() => VitePlugin | VitePlugin[]), options?: ExtendViteConfigOptions): void
参数
pluginOrGetter
:一个 Vite 插件实例或数组。如果提供的是函数,则该函数必须返回一个 Vite 插件实例或数组。
options
:传递给回调函数的选项对象。该对象可以包含以下属性:
属性 | 类型 | 必须 | 描述 |
---|---|---|---|
dev | boolean | false | 如果设置为 true ,回调函数将在开发模式构建时被调用。 |
build | boolean | false | 如果设置为 true ,回调函数将在生产模式构建时被调用。 |
server | boolean | false | 如果设置为 true ,回调函数将在构建服务器包时被调用。 |
client | boolean | false | 如果设置为 true ,回调函数将在构建客户端包时被调用。 |
prepend | boolean | false | 如果设置为 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
参数
pluginOrGetter
:一个 webpack 插件实例或数组。如果提供的是函数,则该函数必须返回一个 webpack 插件实例或数组。
options
:传递给回调函数的选项对象。该对象可以包含以下属性:
属性 | 类型 | 必须 | 描述 |
---|---|---|---|
dev | boolean | false | 如果设置为 true ,回调函数将在开发模式构建时被调用。 |
build | boolean | false | 如果设置为 true ,回调函数将在生产模式构建时被调用。 |
server | boolean | false | 如果设置为 true ,回调函数将在构建服务器包时被调用。 |
client | boolean | false | 如果设置为 true ,回调函数将在构建客户端包时被调用。 |
prepend | boolean | false | 如果设置为 true ,回调函数将使用 unshift() 被添加至数组头部,而非使用 push() 添加至数组尾部。 |
addBuildPlugin
不依赖于构建器的 addVitePlugin
和 addWebpackPlugin
版本。如果存在,它将同时向 Vite 和 webpack 配置添加插件。
类型
function addBuildPlugin (pluginFactory: AddBuildPluginFactory, options?: ExtendConfigOptions): void
参数
pluginFactory
:一个工厂函数,返回一个对象,该对象包含 vite
和/或 webpack
属性。这些属性必须是返回单个或数组形式 Vite 插件实例和/或 webpack 插件实例的函数。
options
:传递给回调函数的选项对象。该对象可以包含以下属性:
属性 | 类型 | 必须 | 描述 |
---|---|---|---|
dev | boolean | false | 如果设置为 true ,回调函数将在开发模式构建时被调用。 |
build | boolean | false | 如果设置为 true ,回调函数将在生产模式构建时被调用。 |
server | boolean | false | 如果设置为 true ,回调函数将在构建服务器包时被调用。 |
client | boolean | false | 如果设置为 true ,回调函数将在构建客户端包时被调用。 |
prepend | boolean | false | 如果设置为 true ,回调函数将使用 unshift() 被添加至数组头部,而非使用 push() 添加至数组尾部。 |