Nuxt.js 构建配置

构建配置

Nuxt.js 允许你根据服务端需求，自定义 webpack 的构建配置。

analyze

Nuxt.js 使用 webpack-bundle-analyzer 分析并可视化构建后的打包文件，你可以基于分析结果来决定如何优化它。

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

如果是 Object 类型， 可以移步 这里 查看可用的属性。

例如 (nuxt.config.js):

module.exports = {
  build: {
    analyze: true
    // or
    analyze: {
      analyzerMode: 'static'
    }
  }
}

提示： 可通过 nuxt build --analyze 或 nuxt build -a 命令来启用该分析器进行编译构建，分析结果可在 http://localhost:8888 上查看。

babel

为 JS 和 Vue 文件设定自定义的 babel 配置。

• 类型: Object
• 默认:

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

默认为 @nuxt/babel-preset-app 在client构建中是ie：'9'，在server构建中是node:'current'。

注意: build.babel.presets 中配置的预设将应用于客户端和服务器构建。目标将由Nuxt相应地设置（客户端/服务器）。如果要为客户端或服务器版本配置不同的预设，请使用presets作为函数：

export default {
  build: {
    babel: {
      presets ({ isServer }) {
        const targets = isServer ? { node: '10' } : { ie: '11' }
        return [
          [ require.resolve('@nuxt/babel-preset-app'), { targets } ]
        ]
      }
    }
  }
}

我们强烈建议使用默认预设。但是,如果必须，您可以更改预设。

Example for custom presets:

export default {
  build: {
    babel: {
      presets: ['es2015', 'stage-0']
    }
  }
}

cache

• 类型: Boolean
• 默认: false
• ⚠️ 实验性的

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

crossorigin

• 类型: String
• 默认: undefined

在生成的HTML中的 <link rel="stylesheet"> 和 <script> 标记上配置 crossorigin 属性。 请查看 CORS settings attributes 了解更多可用选项。

cssSourceMap

• 类型: boolean
• 默认: true 为开发模式(development)， false 为生产模式(production)。

开启 CSS Source Map 支持

devMiddleware

• 类型: Object

请查看 webpack-dev-middleware 了解更多可用选项。

devtools

• 类型: boolean
• 默认: false

配置是否允许 vue-devtools 调试。

如果您已经通过 nuxt.config.js 或其他方式激活，则无论标志为 true 或 false，devtools都会启用。

extend

• 类型： Function

为客户端和服务端的构建配置进行手工的扩展处理。

该扩展方法会被调用两次，一次在服务端打包构建的时候，另外一次是在客户端打包构建的时候。该方法的参数如下：

1. Webpack 配置对象
2. 构建环境对象，包括这些属性(全部为布尔类型):isDev，isClient，isServer

警告: 提供的isClient和isServer键与context中可用的键分开， 它们是长期支持的。这里不要使用process.client和process.server，因为它们是'undefined'。

例如 (nuxt.config.js)：

module.exports = {
  build: {
    extend (config, { isClient }) {
      // 为 客户端打包 进行扩展配置
      if (isClient) {
        config.devtool = 'eval-source-map'
      }
    }
  }
}

如果你想了解更多关于webpack的配置，可以移步 Nuxt.js 源码的 webpack 目录。

loaders in extend

loaders具有与之相同的对象结构 build.loaders, 所以你可以在extend中更改loaders的选项。

例如 (nuxt.config.js):

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

extractCSS

使用Vue 服务器端渲染指南启用常见CSS提取。

• 类型: Boolean
• 默认: false

使用extract-css-chunks-webpack-plugin将主块中的 CSS 提取到一个单独的 CSS 文件中（自动注入模板），该文件允许单独缓存文件。当有很多共用 CSS 时建议使用此方法，异步组件中的 CSS 将保持内联为JavaScript字符串并由vue-style-loader处理。

filenames

• 类型： Object

自定义打包文件名

• 默认值：{ app: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js', chunk: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js', css: ({ isDev }) => isDev ? '[name].css' : '[contenthash].css', img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[contenthash:7].[ext]', font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[contenthash:7].[ext]', video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[contenthash:7].[ext]' }

此示例将 chunk 名称更改为数字id (nuxt.config.js):

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

要更多了解使用，可以移步webpack documentation

friendlyErrors

• 类型: Boolean
• 默认: true (启用叠加)

友好的错误 Webpack 插件

hardSource

• 类型: Boolean
• 默认: false
• ⚠️ 实验性的

开启 HardSourceWebpackPlugin

hotMiddleware

• 类型: Object

请查看 webpack-hot-middleware 了解更多可用选项。

html.minify

• 类型: Object
• 默认:

{
  collapseBooleanAttributes: true,
  collapseWhitespace: false,
  decodeEntities: true,
  minifyCSS: true,
  minifyJS: true,
  processConditionalComments: true,
  removeAttributeQuotes: false,
  removeComments: false,
  removeEmptyAttributes: true,
  removeOptionalTags: false,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: false,
  removeStyleLinkTypeAttributes: false,
  removeTagWhitespace: false,
  sortClassName: false,
  trimCustomFragments: true,
  useShortDoctype: true
}

用于压缩在构建打包过程中创建的HTML文件配置html-minifier的插件（将应用于所有模式）。

loaders

• 类型： Object

自定义 webpack 加载器

• Default:

{
  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 and loaders.imgUrl

更多详情查看 url-loader 配置.

loaders.pugPlain

更多详情查看 pug-plain-loader 或 Pug compiler 配置.

loaders.vue

更多详情查看 vue-loader 配置.

loaders.css and loaders.cssModules

更多详情查看 css-loader 配置. 注意：cssModules是使用的loader选项 CSS Modules

loaders.less

您可以通过loaders.less将任何Less特定选项传递给less-loader。 请查看 Less 文档 来获取更多配置信息。

loaders.sass and loaders.scss

查看 Node Sass 文档 来获取更多配置信息。 Note: loaders.sass is for Sass Indented Syntax

注意：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: {} } }

在开发或分析模式下，splitChunks.name的默认值为true。 You can set minimizer to a customized Array of plugins or set minimize to false to disable all minimizers. 您可以将minimizer设置为自定义插件，或将minim设置为false以禁用所有minimize。(默认在开发环境情况下，minimize被禁用)。

查看 Webpack Optimization来了解更多配置信息。

terser

• 类型: Object 或 Boolean
• 默认:

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

设置为false可以禁用此插件。

当webpack中 config.devtool 与source-?map匹配时，将启用sourceMap

查看 webpack-contrib/terser-webpack-plugin来了解更多配置信息。

optimizeCSS

• 类型: Object 或 Boolean
• 默认:false{} when extractCSS is enabled

OptimizeCSSAssets 插件配置查看NMFR/optimize-css-assets-webpack-plugin.

parallel

• 类型: Boolean
• 默认: false

在webpack构建打包中开启 thread-loader。

plugins

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

配置 Webpack 插件

例如 (nuxt.config.js):

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

postcss

• 类型： Array, Object(推荐), Function 或 Boolean

注意：Nuxt.js已应用PostCSS Preset Env。默认情况下，它将启用Stage 2功能和Autoprefixer,你可以使用build.postcss.preset来配置它。

自定义 postcss 配置

默认值：

{
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    'postcss-preset-env': {},
    'cssnano': { preset: 'default' } // disabled in dev mode
  }
}

例如 (nuxt.config.js)：

export default {
  build: {
    postcss: {
      plugins: {
        // Disable `postcss-url`
        'postcss-url': false,
        // Add some plugins
        'postcss-nested': {},
        'postcss-responsive-type': {},
        'postcss-hexrgba': {}
      },
      preset: {
        autoprefixer: {
          grid: true
        }
      }
    }
  }
}

profile

• 类型: Boolean
• 默认: 开启只需在命令行中加入： --profile

开启 profiler 请查看 WebpackBar

publicPath

Nuxt.js允许您将dist文件上传到CDN来获得最快渲染性能，只需将publicPath设置为CDN即可。

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

例如 (nuxt.config.js):

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

然后，当启动nuxt build时， 将.nuxt/dist/client目录的内容上传到您的CDN即可！

quiet

控制部分构建信息输出日志

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

splitChunks

• 类型: Object
• 默认:{ layouts: false, pages: true, commons: true }

如果代码分模块用于 layout, pages 和 commons (常用: vue|vue-loader|vue-router|vuex...).

ssr

为服务器端渲染创建特殊的webpack包。

• 类型: Boolean
• 默认: true 为通用模式，false 为spa模式

如果未提供，则根据默认模式自动设置此选项。

styleResources

• 类型: Object
• 默认: {}

当您需要在页面中注入一些变量和mixin而不必每次都导入它们时，这非常有用。

Nuxt.js 使用 https://github.com/nuxt-community/style-resources-module 来实现这种行为。

您需要为css预处理器指定要包含的 模式 / 路径 ： less, sass, scss 或 stylus

您不能在此处使用路径别名(~ 和 @)，

:warning: You cannot use path aliases here (~ and @)，你需要使用相对或绝对路径。

安装 style-resources：

$ yarn add @nuxtjs/style-resources

根据需要安装：

• SASS: $ yarn add sass-loader node-sass
• LESS: $ yarn add less-loader less
• Stylus: $ yarn add stylus-loader stylus

修改 nuxt.config.js:

export default {
  modules: [
    '@nuxtjs/style-resources'
  ],
  styleResources: {
    scss: './assets/variables.scss',
    less: './assets/**/*.less'
    // sass: ...
  }
}

然后就可以随处直接使用定义过的变量或函数。

templates

Nuxt.js允许您自定义自己的模板，这些模板将基于Nuxt配置进行渲染。 此功能特别适用于使用 modules。

• 类型: Array

Example (nuxt.config.js):

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

使用lodash.template呈现模板，您可以了解有关使用它们的更多信息here。

transpile

• 类型: Array<string | RegExp>
• 默认: []

如果要使用Babel与特定的依赖关系进行转换，你可以在build.transpile中添加它们，transpile中的选项可以是字符串或正则表达式对象，用于匹配依赖项文件名。

vueLoader

注意：此配置在Nuxt 2.0+中已被删除，请使用 build.loaders.vue 来替代

• 类型: Object
• 默认:{ productionMode: !this.options.dev, transformAssetUrls: { video: 'src', source: 'src', object: 'src', embed: 'src' } }

指定 Vue Loader 配置.

vendor

注意：在Nuxt.js 2.0+版本中，vendor由于Webpack 4，将废弃该API但保留使用方法作为兼容低版本处理。查看：Nuxt.js 2.0 更新文档

Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。这里说的是一些你所依赖的第三方模块 (比如 axios)

• 类型： Array数组元素类型： String

想要把模块打包进 vendor bundle，你可以在 nuxt.config.js 的 build.vendor 字段中配置：

module.exports = {
  build: {
    vendor: ['axios']
  }
}

你也可以配置文件路径，比如一些自己写的库:

module.exports = {
  build: {
    vendor: [
      'axios',
      '~plugins/my-lib.js'
    ]
  }
}

watch

您可以使用watch来监听文件更改。此功能特别适用用在modules中。

• 类型: Array<String>

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

followSymlinks

By default, the build process does not scan files inside symlinks. This boolean includes them, thus allowing usage of symlinks inside folders such as the "pages" folder, for example.

• Type: Boolean

export default {
  build: {
    followSymlinks: false
  }
}