build 属性

Nuxt 允许自定义 webpack 配置，随心所欲地构建 Web 应用程序。

analyze

Nuxt 使用 webpack-bundle-analyzer 可视化 bundle 文件及优化方式。

• 类型: Boolean 或 Object
• 默认值: false

如果是对象，可用属性请参阅此处 。

export default {
  build: {
    analyze: true,
    // 或
    analyze: {
      analyzerMode: 'static'
    }
  }
}

corejs

从 Nuxt@2.14 起，Nuxt 会自动检测 core-js 的当前版本，也可以指定要使用的版本。

• 类型: number | string（有效值为 'auto'、2 和 3）
• 默认值: 'auto'

babel

为 JavaScript 和 Vue 文件自定义 Babel 配置。默认情况下忽略 .babelrc。

• 类型: Object
• 参见 babel-loader 选项 和 babel 选项
• 默认值:

  {
    babelrc: false,
    cacheDirectory: undefined,
    presets: ['@nuxt/babel-preset-app']
  }
  

@nuxt/babel-preset-app 的默认目标：client 构建为 ie: '9'，server 构建为 node: 'current'。

presets

• 类型: Function
• 参数:
  1. Object: { isServer: true | false }
  2. Array:
     • 预设名称 @nuxt/babel-preset-app
     • @nuxt/babel-preset-app 的选项

注意: build.babel.presets 中配置的预设会同时应用于客户端和服务端构建。目标由 Nuxt 根据（客户端/服务端）分别设置。如果想为客户端和服务端构建配置不同的预设，请将 presets 用作函数：

强烈建议使用默认预设，而不是以下自定义方式

export default {
  build: {
    babel: {
      presets({ isServer }, [ preset, options ]) {
        // 直接修改选项
        options.targets = isServer ? ... :  ...
        options.corejs = ...
        // 不返回任何内容
      }
    }
  }
}

或通过返回完整的预设列表来覆盖默认值：

export default {
  build: {
    babel: {
      presets({ isServer }, [preset, options]) {
        return [
          [
            preset,
            {
              targets: isServer ? ... :  ...,
              ...options
            }
          ],
          [
            // 其他预设
          ]
        ]
      }
    }
  }
}

cache

• 类型: Boolean
• 默认值: false
• ⚠️ 实验性功能

使用 terser-webpack-plugin 和 cache-loader 启用缓存

cssSourceMap

• 类型: boolean
• 默认值: 开发模式为 true，生产模式为 false

启用 CSS source map 支持

devMiddleware

• 类型: Object

可用选项请参阅 webpack-dev-middleware 。

devtools

• 类型: boolean
• 默认值: false

配置是否允许 vue-devtools 检查。

如果已在 nuxt.config.js 等处启用，无论此标志如何，devtools 都会启用。

extend

手动扩展客户端和服务端 bundle 的 webpack 配置。

• 类型: Function

extend 方法会被调用两次，一次用于服务端 bundle，一次用于客户端 bundle。方法参数如下：

1. webpack 配置对象
2. 包含以下键的对象（除 loaders 外均为布尔值）：isDev、isClient、isServer、loaders

export default {
  build: {
    extend(config, { isClient }) {
      // 仅扩展客户端 bundle 的 webpack 配置
      if (isClient) {
        config.devtool = 'source-map'
      }
    }
  }
}

如果想了解更多默认 webpack 配置，请参阅 webpack 目录 。

extend 中的 loaders

loaders 与 build.loaders 具有相同的对象结构，因此可以在 extend 内部修改 loaders 的选项。

export default {
  build: {
    extend(config, { isClient, loaders: { vue } }) {
      // 仅扩展客户端 bundle 的 webpack 配置
      if (isClient) {
        vue.transformAssetUrls.video = ['src', 'poster']
      }
    }
  }
}

extractCSS

使用 Vue 服务端渲染指南 提取公共 CSS。

• 类型: Boolean 或 Object
• 默认值: false

内部使用 extract-css-chunks-webpack-plugin ，所有 CSS 会被提取到单独的文件中，通常每个组件一个。这样可以分别缓存 CSS 和 JavaScript，当存在大量全局或公共 CSS 时值得尝试。

示例 (nuxt.config.js)：

export default {
  build: {
    extractCSS: true,
    // 或
    extractCSS: {
      ignoreOrder: true
    }
  }
}

如果想将所有 CSS 提取到一个文件中，有一个变通方法：

export default {
  build: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
}

filenames

自定义 bundle 文件名。

• 类型: Object
• 默认值:

  {
    app: ({ isDev, isModern }) => isDev ? `[name]${isModern ? '.modern' : ''}.js` : `[contenthash:7]${isModern ? '.modern' : ''}.js`,
    chunk: ({ isDev, isModern }) => isDev ? `[name]${isModern ? '.modern' : ''}.js` : `[contenthash:7]${isModern ? '.modern' : ''}.js`,
    css: ({ isDev }) => isDev ? '[name].css' : 'css/[contenthash:7].css',
    img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[name].[contenthash:7].[ext]',
    font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[name].[contenthash:7].[ext]',
    video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[name].[contenthash:7].[ext]'
  }
  

此示例将 chunk 名称改为数字 id：

export default {
  build: {
    filenames: {
      chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].js')
    }
  }
}

要更好地理解 manifest 的用法，请参阅此 webpack 文档 。

friendlyErrors

• 类型: Boolean
• 默认值: true（启用覆盖）

使用 FriendlyErrorsWebpackPlugin 启用或禁用覆盖。

hardSource

• 类型: Boolean
• 默认值: false
• ⚠️ 实验性功能

启用 HardSourceWebpackPlugin 以改善缓存。

hotMiddleware

• 类型: Object

可用选项请参阅 webpack-hot-middleware 。

html.minify

• 类型: Object
• 默认值:

{
  collapseBooleanAttributes: true,
  decodeEntities: true,
  minifyCSS: true,
  minifyJS: true,
  processConditionalComments: true,
  removeEmptyAttributes: true,
  removeRedundantAttributes: true,
  trimCustomFragments: true,
  useShortDoctype: true
}

注意： 对 html.minify 的更改不会与默认值合并！

用于压缩构建过程中创建的 HTML 文件的 html-minifier 插件配置（适用于_所有模式_）。

indicator

在开发模式下显示热模块替换的构建指示器（v2.8.0 及以上可用）

• 类型: Boolean
• 默认值: true

loaders

自定义 Nuxt 集成的 webpack loaders 选项

• 类型: Object
• 默认值:

{
  file: {},
  fontUrl: { limit: 1000 },
  imgUrl: { limit: 1000 },
  pugPlain: {},
  vue: {
    transformAssetUrls: {
      video: 'src',
      source: 'src',
      object: 'src',
      embed: 'src'
    }
  },
  css: {},
  cssModules: {
    localIdentName: '[local]_[hash:base64:5]'
  },
  less: {},
  sass: {
    indentedSyntax: true
  },
  scss: {},
  stylus: {},
  vueStyle: {}
}

注意：除了在 nuxt.config.js 中指定配置外，还可以通过 build.extend 修改配置

loaders.file

详情请参阅 file-loader 选项 。

loaders.fontUrl 和 loaders.imgUrl

详情请参阅 url-loader 选项 。

loaders.pugPlain

详情请参阅 pug-plain-loader 或 Pug compiler 选项 。

loaders.vue

详情请参阅 vue-loader 选项 。

loaders.css 和 loaders.cssModules

详情请参阅 css-loader 选项 。注意：cssModules 是使用 CSS Modules 的 loader 选项。

loaders.less

可以通过 loaders.less 将 Less 特定选项传递给 less-loader。所有可用的 dash-case 选项请参阅 Less 文档 。

loaders.sass 和 loaders.scss

可用的 Sass 选项请参阅 Sass 文档 。注意：loaders.sass 用于 Sass 缩进语法 。

loaders.vueStyle

详情请参阅 vue-style-loader 选项 。

optimization

• 类型: Object
• 默认值:

  {
    minimize: true,
    minimizer: [
      // terser-webpack-plugin
      // optimize-css-assets-webpack-plugin
    ],
    splitChunks: {
      chunks: 'all',
      automaticNameDelimiter: '.',
      name: undefined,
      cacheGroups: {}
    }
  }
  

在 dev 或 analyze 模式下，splitChunks.name 的默认值为 true。

可以将 minimizer 设置为自定义插件数组，或将 minimize 设为 false 来禁用所有 minimizer（开发模式下默认禁用 minimize）。

参阅 Webpack 优化 。

optimizeCSS

• 类型: Object 或 Boolean
• 默认值:
  • false
  • 启用 extractCSS 时为 {}

OptimizeCSSAssets 插件选项。

参阅 NMFR/optimize-css-assets-webpack-plugin 。

parallel

• 类型: Boolean
• 默认值: false
• ⚠️ 实验性功能

在 webpack 构建中启用 thread-loader

plugins

添加 webpack 插件

• 类型: Array
• 默认值: []

import webpack from 'webpack'
import { version } from './package.json'
export default {
  build: {
    plugins: [
      new webpack.DefinePlugin({
        'process.VERSION': version
      })
    ]
  }
}

postcss

自定义 PostCSS Loader 插件

• 类型: Array（旧版，将覆盖默认值）、Object（推荐）、Function 或 Boolean
  注意： Nuxt 已应用 PostCSS Preset Env 。默认启用 Stage 2 特性 和 Autoprefixer ，可通过 build.postcss.preset 配置。
• 默认值:
  nuxt.config.js

  {
    plugins: {
      'postcss-import': {},
      'postcss-url': {},
      'postcss-preset-env': this.preset,
      'cssnano': { preset: 'default' } // 开发模式下禁用
    },
    order: 'presetEnvAndCssnanoLast',
    preset: {
      stage: 2
    }
  }
  

自定义插件配置会与默认插件配置合并（除非使用 Array 代替 Object）。

export default {
  build: {
    postcss: {
      plugins: {
        // 禁用 `postcss-url`
        'postcss-url': false,
        // 添加插件
        'postcss-nested': {},
        'postcss-responsive-type': {},
        'postcss-hexrgba': {}
      },
      preset: {
        autoprefixer: {
          grid: true
        }
      }
    }
  }
}

当 postcss 配置为 Object 时，可以使用 order 定义插件顺序：

• 类型: Array（有序插件名称）、String（顺序预设名称）、Function
• 默认值: cssnanoLast（将 cssnano 放在最后）

export default {
  build: {
    postcss: {
      // 预设名称
      order: 'cssnanoLast',
      // 有序插件名称
      order: ['postcss-import', 'postcss-preset-env', 'cssnano']
      // 计算插件顺序的函数
      order: (names, presets) => presets.cssnanoLast(names)
    }
  }
}

postcss 插件与 @nuxtjs/tailwindcss

如果想在 @nuxtjs/tailwindcss 配置中应用 postcss 插件（如 postcss-pxtorem），需要更改顺序，先加载 tailwindcss。

此配置不影响 nuxt-purgecss。

import { join } from 'path'

export default {
  // ...
  build: {
    postcss: {
      plugins: {
        tailwindcss: join(__dirname, 'tailwind.config.js'),
        'postcss-pxtorem': {
          propList: ['*', '!border*']
        }
      }
    }
  }
}

profile

• 类型: Boolean
• 默认值: 通过命令行参数 --profile 启用

在 WebpackBar 的 profiler 中启用

publicPath

Nuxt 支持将 dist 目录中的文件上传到 CDN 以最大化性能，只需将 publicPath 设置为 CDN 即可。

• 类型: String
• 默认值: '/_nuxt/'

export default {
  build: {
    publicPath: 'https://cdn.nuxtjs.org'
  }
}

设置后，运行 nuxt build 时，将 .nuxt/dist/client 目录的内容上传到 CDN。

Nuxt v2.15 及以上，在运行时更改此属性的值会覆盖已构建应用程序的配置。

quiet

抑制大部分构建输出日志

• 类型: Boolean
• 默认值: 由 std-env 检测到 CI 或 test 环境时启用

splitChunks

• 类型: Object
• 默认值:
  nuxt.config.js

  export default {
    build: {
      splitChunks: {
        layouts: false,
        pages: true,
        commons: true
      }
    }
  }
  

对 layout、pages 和 commons 进行代码分割（公共库：vue|vue-loader|vue-router|vuex...）

ssr

为 SSR 渲染器创建 webpack bundle。

• 类型: Boolean
• 默认值: universal 模式为 true，spa 模式为 false

如果未指定此选项，会根据 mode 值自动设置。

standalone

在服务端构建中内联打包依赖（高级）

• 类型: Boolean
• 默认值: false

此模式会打包通常在服务端构建中作为外部依赖的 node_modules（详情 ）。

styleResources

• 类型: Object
• 默认值: {}

当需要在页面中注入变量或 mixin 而不必每次都导入时很有用。

Nuxt 使用 https://github.com/yenshih/style-resources-loader 实现此功能。

需要为特定预处理器（less、sass、scss 或 stylus）指定要包含的模式/路径：

此处不能使用路径别名（~ 或 @），需要使用相对路径或绝对路径。

{
  build: {
    styleResources: {
      scss: './assets/variables.scss',
      less: './assets/*.less',
      // sass: ...,
      // scss: ...
      options: {
        // 参阅 https://github.com/yenshih/style-resources-loader#options
        // 除 `patterns` 属性外
      }
    }
  }
}

templates

Nuxt 允许提供自定义模板，这些模板会根据 Nuxt 配置进行渲染。此功能在使用模块时特别有用。

• 类型: Array

export default {
  build: {
    templates: [
      {
        src: '~/modules/support/plugin.js', // `src` 可以是绝对路径或相对路径
        dst: 'support.js', // `dst` 是相对于 `.nuxt` 目录的路径
        options: {
          // 选项通过 `options` 键提供给模板
          live_chat: false
        }
      }
    ]
  }
}

模板使用 lodash.template 渲染，此处 可了解更多用法。

terser

• 类型: Object 或 Boolean
• 默认值:

{
  parallel: true,
  cache: false,
  sourceMap: false,
  extractComments: {
    filename: 'LICENSES'
  },
  terserOptions: {
    output: {
      comments: /^\**!|@preserve|@license|@cc_on/
    }
  }
}

Terser 插件选项。设为 false 可禁用此插件。

启用 sourceMap 后，如果 webpack 的 config.devtool 设置为 source-map，每个输出文件末尾会保留 //# sourceMappingURL 链接注释。

参阅 webpack-contrib/terser-webpack-plugin 。

transpile

• 类型: Array<String | RegExp | Function>
• 默认值: []

如果想用 Babel 转译特定依赖，可以在 build.transpile 中添加。transpile 的项目可以是字符串或正则表达式对象，用于匹配依赖的包名或文件名。

从 v2.9.0 起，也可以使用函数进行条件转译，函数接收一个对象（{ isDev, isServer, isClient, isModern, isLegacy }）：

{
  build: {
    transpile: [({ isLegacy }) => isLegacy && 'ky']
  }
}

此示例中，当 Nuxt 不在现代模式 时，ky 会被 Babel 转译。

vueLoader

注意：此配置从 Nuxt 2.0 起已移除，请改用 build.loaders.vue 。

• 类型: Object
• 默认值:
  nuxt.config.js

  {
    productionMode: !this.options.dev,
    transformAssetUrls: {
      video: 'src',
      source: 'src',
      object: 'src',
      embed: 'src'
    }
  }
  

指定 Vue Loader 选项 。

watch

可以提供自定义文件进行监听和重新生成。此功能在使用模块 时特别有用。

• 类型: Array<String>

export default {
  build: {
    watch: ['~/.nuxt/support.js']
  }
}

followSymlinks

默认情况下，构建过程不扫描符号链接内的文件。此布尔值控制是否扫描，将 followSymlinks 设为 true 可以在 "pages" 等文件夹中使用符号链接。

• 类型: Boolean

export default {
  build: {
    followSymlinks: true
  }
}