A propriedade build

O Nuxt permite você personalizar a configuração do webpack para construir a sua aplicação web como você quiser.

A propriedade analyze

O Nuxt usa o webpack-bundle-analyzer para permitir você visualizar seus pacotes e como otimizar eles.

• Tipo: Boolean ou Object
• Padrão: false

Se for um objeto, veja as propriedades disponíveis aqui .

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

A propriedade corejs

Desde o [email protected] o Nuxt automaticamente deteta a versão atual do core-js dentro do seu projeto, você também pode especificar qual versão você deseja usar.

• Tipo: number | string (os valores válidos são 'auto', 2 e 3)
• Padrão: 'auto'

A propriedade babel

Personalize a configuração do Babel para os ficheiros JavaScript e Vue. .babelrc é ignorado por padrão.

• Tipo: Object
• Consulte as opções do babel-loader e as opções do babel
• Padrão:

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

A alvos padrão do @nuxt/babel-preset-app são: ie: '9' na construição do client, e node: 'current' na construção do server.

O método presets

• Tipo: Function
• Argumento:
  1. Object: { isServer: true | false }
  2. Array:
     • nome prédefinido @nuxt/babel-preset-app
     • opções do @nuxt/babel-preset-app

Nota:: O presets configurado dentro do build.babel.presets será aplicado a ambas, construção cliente e a do servidor. O alvo será definido pelo Nuxt de acordo com o (cliente/servidor). Se você quiser configurar o preset diferentemente para a construção do cliente ou do servidor, use o presets como uma função:

Nós recomendamos fortemente a usar o preset padrão ao invés da personalização abaixo

export default {
  build: {
    babel: {
      presets({ isServer }, [ preset, options ]) {
        // muda as opções diretamente
        options.targets = isServer ? ... :  ...
        options.corejs = ...
        // não retorna nada
      }
    }
  }
}

Ou sobrescreva o valor padrão ao retornar a lista de presets inteira:

export default {
  build: {
    babel: {
      presets({ isServer }, [preset, options]) {
        return [
          [
            preset,
            {
              targets: isServer ? ... :  ...,
              ...options
            }
          ],
          [
            // Outras predefinições
          ]
        ]
      }
    }
  }
}

A propriedade cache

• Tipo: Boolean
• Padrão: false
• ⚠️ Experimental

Ativa o cache do terser-webpack-plugin e do cache-loader

A propriedade cssSourceMap

• Tipo: boolean
• Padrão: true para o desenvolvimento e false para a produção.

Ativa o suporte ao CSS Source Map (Mapa da Fonte do CSS)

A propriedade devMiddleware

• Tipo: Object

Consulte o webpack-dev-middleware para conhecer as opções disponíveis.

A propriedade devtools

• Tipo: boolean
• Padrão: false

Configura-se para permitir inspeção do vue-devtools .

Se você já a ativou através do ficheiro nuxt.config.js ou de outra maneira, a ferramenta de desenvolvimento ativa apesar da bandeira.

O método extend

Estende a configuração do webpack manualmente para os pacotes do cliente e do servidor.

• Tipo: Function

O extend é chamado duas vezes, uma vez para o pacote do servidor, e uma vez para o pacote do cliente. Os argumentos do método são:

1. O objeto de configuração do Webpack,
2. Um objeto com as seguintes chaves (todas booleanas exceto loaders): isDev, isClient, isServer, loaders.

export default {
  build: {
    extend(config, { isClient }) {
      // Extend only webpack config for client-bundle
      if (isClient) {
        config.devtool = 'source-map'
      }
    }
  }
}

Se você quiser ver mais sobre nossa configuração padrão do webpack, dê uma vista de olhos no nosso diretório do webpack .

O objeto loaders dentro do extend

O loaders tem a mesma estrutura de objeto que o build.loaders , assim você pode mudar as opções de loaders dentro do extend.

export default {
  build: {
    extend(config, { isClient, loaders: { vue } }) {
      // Estende a configuração do webpack somente para o pacote do cliente
      if (isClient) {
        vue.transformAssetUrls.video = ['src', 'poster']
      }
    }
  }
}

A propriedade extractCSS

Ativa a Common CSS Extraction (Extração Comum do CSS) usando as orientações do Vue Server Renderer (Servidor Renderizador do Vue).

• Tipo: Boolean ou Object
• Padrão: false

Ao usar o extract-css-chunks-webpack-plugin nos bastidores, todo o seu CSS será extraido em ficheiros separados, normalmente um por componente. Isto permite o cacheamento do seu CSS e JavaScript separadamente e vale a pena tentar no caso de você ter um grande volume ou CSS partilhado.

Exemplo (nuxt.config.js):

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

Você talvez queira extrair todo o seu CSS em ficheiro único. Existe uma maneira de dar a volta a isto:

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

A propriedade filenames

Personaliza os nomes de ficheiro de pacote.

• Tipo: Object
• Padrão:

  {
    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]'
  }
  

Este exemplo muda pedaços agradáveis de nomes para identificadores numéricos:

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

Para entender um pouco mais sobre o uso de manifestos, dê uma vista de olhos na documentação do webpack .

A propriedade friendlyErrors

• Tipo: Boolean
• Padrão: true (cobertura ativada)

Ativa ou desativa a cobertura fornecida pelo FriendlyErrorsWebpackPlugin

A propriedade hardSource

• Tipo: Boolean
• Padrão: false
• ⚠️ Experimental

Ativa o HardSourceWebpackPlugin para melhoramento do cache

A propriedade hotMiddleware

• Tipo: Object

Consulte o webpack-hot-middleware para saber as opções disponíveis

A propriedade html.minify

• Tipo: Object
• Padrão:

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

Atenção: Se você fizer mudanças ao html.minify, elas não serão combinadas com os padrões!

Configuração para o plugin html-minifier usada para minificar os ficheiros HTML criados durante o processo de construção (serão aplicados a todos os modos).

A propriedade indicator

Mostra o indicador de construção para o substituição forte de módulo em desenvolvimento (disponível nas versões v2.8.0+)

• Tipo: Boolean
• Padrão: true

A propriedade loaders

Personliaza as opções do Nuxt integradas aos loaders (carregadores) do webpack.

• Tipo: Object
• Padrão:

{
  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: {}
}

Nota: Além de especificar a configuração dentro do ficherio nuxt.config.js, ele pode também ser modificado pelo build.extend

A propriedade loaders.file

Mais detalhes estão dentro das opções do file-loader .

As subpropriedades loaders.fontUrl e loaders.imgUrl

More details are in url-loader options . Mais detalhes estão dentro das opções do url-loader .

A propriedade loaders.pugPlain

Mais detalhes estão dentro do pug-plain-loader e das opções do compilador do Pug .

A propriedade loaders.vue

Mais detalhes estão dentro das opões do vue-loader .

As subpropriedades loaders.css e loaders.cssModules

Mais detalhes estão dentro das opções do css-loader . O cssModules é a opção do carregador para o uso de Módulos do CSS

A propriedade loaders.less

Você pode passar quaisqueres opções específicas do Less para o less-loader via loaders.less. Consulte a documentação do Less para saber todas opções disponíves dentro do dash-case

As subpropriedades loaders.sass e loaders.scss

Consulte a documentação do Sass para saber todas opções disponíveis para o Sass. Nota: O loaders.sass é para Sintaxe Indentada do Sass

A propriedade loaders.vueStyle

Mais detalhes estão dentro das opções do vue-style-loader .

A propriedade optimization

• Tipo: Object
• Padrão:

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

O valor padrão do splitChunks.name é true no modo dev (desenvolvimento) ou no modo analyze (analise).

Você pode definir minimizer para um Array personalizado de plugins ou definir minimize para false para desativar todos minimizadores. (minimize está desativado para desativado para desenvolvimento por padrão)

Consulte a seção de Otimização do Webpack .

A propriedade optimizeCSS

• Tipo: Object ou Boolean
• Padrão:
  • false
  • {} quando o extractCSS estiver ativado

Opções do plugin OptimizeCSSAssets.

Consulte o NMFR/optimize-css-assets-webpack-plugin .

A propriedade parallel

• Tipo: Boolean
• Padrão: false
• ⚠️ Experimental

Ativa o thread-loader dentro da construção do webpack

A propriedade plugins

Adiciona plugins do webpack

• Tipo: Array
• Padrão: []

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

A propriedade postcss

Personaliza os plugins do Carregador do PostCSS plugins.

• Tipo: Array (legado, sobrescreverá os padrões), Object (recomendado), Function ou Boolean
  Nota: O Nuxt tem aplicado a pré-definição de ambiente do PostCSS . Por padrão ele ativa o estágio de 2 funcionalidades e o Autoprefixer , você pode usar o build.postcss.preset para configurar ele.
• Padrão:
  nuxt.config.js

  {
    plugins: {
      'postcss-import': {},
      'postcss-url': {},
      'postcss-preset-env': this.preset,
      'cssnano': { preset: 'default' } // desativado no modo de desenvolvimento
    },
    order: 'presetEnvAndCssnanoLast',
    preset: {
      stage: 2
    }
  }
  

As suas definições personalizadas de plugin serão combinadas com os plugins padrão (a menos que você esteja usando um Array ao invés de um Object).

export default {
  build: {
    postcss: {
      plugins: {
        // Desativa `postcss-url`
        'postcss-url': false,
        // Adiciona alguns plugins
        'postcss-nested': {},
        'postcss-responsive-type': {},
        'postcss-hexrgba': {}
      },
      preset: {
        autoprefixer: {
          grid: true
        }
      }
    }
  }
}

Se a configuração do PostCSS é um Object, o order pode ser usado para definição da ordem do plugin:

• Tipo: Array (ordenado por nomes de plugin), String (ordena a pré-definição de nome), Function
• Padrão: cssnanoLast (coloca cssnano em último)

export default {
  build: {
    postcss: {
      // pré-definição do nome
      order: 'cssnanoLast',
      // ordenado por nomes de plugin
      order: ['postcss-import', 'postcss-preset-env', 'cssnano']
      // função para calcular a ordem do plugin
      order: (names, presets) => presets.cssnanoLast(names)
    }
  }
}

A propriedade plugins do postcss e o módulo @nuxtjs/tailwindcss

Se você quiser aplicar um plugin de PostCSS (por exemplo, postcss-pxtorem) na configuração do módulo @nuxtjs/tailwindcss, você tem de mudar a ordem e carregar o tailwindcss primeiro.

Esta configuração não tem impacto sobre o nuxt-purgecss.

import { join } from 'path'

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

A propriedade profile

• Tipo: Boolean
• Padrão: ativado pelo argumento de linha de comando --profile

Ativa o perfilador dentro do WebpackBar

A propriedade publicPath

O Nuxt deixa você carregar os seus ficheiros de distribuição para o seu CDN para o máximo desempenho, simplesmente defina o PublicPath para o seu CDN.

• Tipo: String
• Padrão: '/_nuxt/'

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

Depois, quando estiver executando o nuxt build, carrega o conteúdo do diretório .nuxt/dist/client para a sua CDN e voilà!.

No Nuxt 2.15+, mudando o valor desta propriedade em tempo de execução sobrescreverá a configuração de uma aplicação que já tem sido construida.

A propriedade quiet

Suprime a maioria do registo de saída da construção

• Tipo: Boolean
• Padrão: Ativado quando uma CI ou ambiente de test é detetado pelo std-env

A propriedade splitChunks

• Tipo: Object
• Padrão:
  nuxt.config.js

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

Se criar ou não pedaços separados para o layouts, pages e commons (bibliotecas comuns: vue|vue-loader|vue-router|vuex...) Para mais informações, consulte a documentação do webpack .

A propriedade ssr

Cria um pacote especial do webpack para o renderizador de SSR.

• Tipo: Boolean
• Padrão: true para o modo universal e false para o modo de aplicação de página única

Esta opção é automaticamente definida com base no valor de mode se não for fornecida.

A propriedade standalone

Dependências em linha do pacote do servidor (avançado)

• Tipo: Boolean
• Padrão: false

Este mode empacota o node_modules que é normalmente preservado como externo dentro da construção de servidor (mais informações ).

A propriedade styleResources

• Tipo: Object
• Padrão: {}

Isto é útil quando você precisa injetar algumas variáveis e mixins dentro das suas páginas sem ter que importar elas a todo momento.

O Nuxt usa o style-resources-loader para alcançar este comportamento.

Você precisa especificar os padrões/caminhos que você quer incluir para os dados pré-processadores: less, sass, scss ou stylus

Você não pode usar os apelidos de caminho aqui (~ e @), você precisa usar caminhos relativos e caminhos absolutos.

{
  build: {
    styleResources: {
      scss: './assets/variables.scss',
      less: './assets/*.less',
      // sass: ...,
      // scss: ...
      options: {
        // Consulte o https://github.com/yenshih/style-resources-loader#options
        // Exceto a propriedade `patterns`
      }
    }
  }
}

A propriedade templates

O Nuxt permite você fornecer os seus próprios modelos os quais serão renderizados com base na configuração do Nuxt. Esta funcionalidade é especialmente útil para uso com módulos .

• Tipo: Array

export default {
  build: {
    templates: [
      {
        src: '~/modules/support/plugin.js', // `src` pode ser absoluto ou relativo
        dst: 'support.js', // `dst` é relativo ao diretório `.nuxt` do projeto
        options: {
          // Opções são fornecidas ao modelo como chave `options`
          live_chat: false
        }
      }
    ]
  }
}

Os modelos são renderizados usando o lodash.template que você pode aprender sobre como usar eles aqui .

A propriedade terser

• Tipo: Object or Boolean
• Padrão:

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

Opções do plugin Terser. Defina para false para desativar este plugin.

A ativação do sourceMap deixará o comentário de ligação //# sourceMappingURL no final de cada ficheiro de saída se o webpack config.devtool estiver definido para source-map.

Consulte o webpack-contrib/terser-webpack-plugin .

A propriedade transpile

• Tipo: Array<String | RegExp | Function>
• Padrão: []

Se você quiser transpilar dependências específicas com Babel, você pode adicionar elas dentro do build.transpile. Cada item dentro da propriedade transpile pode ser um nome de pacote, uma sequência de caracteres e objeto de expressões regulares correspondem ao nome do ficheiro da dependência.

A partir da versão 2.9.0, você pode também usar uma função para transpilar condicionalmente, a função receberá um objeto ({ isDev, isServer, isClient, isModern, isLegacy }):

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

Neste exemplo, o ky será transpilado pelo Babel se o Nuxt não estiver no modo moderno .

A propriedade vueLoader

Nota: Esta configuração tem sido removida desde a versão 2.0 do Nuxt, ao invés desta use o build.loaders.vue .

• Tipo: Object
• Padrão:
  nuxt.config.js

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

Especifica as Opções do Carregador do Vue .

A propriedade watch

Você pode fornecer os seus ficheiros personalizados para observar e regerar depois de mudanças. Esta funcionalidade é especialmente útil para ser usada com módulos .

• Tipo: Array<String>

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

A propriedade followSymlinks

Por padrão, o processo de construção não examinar os ficheiros dentro de ligações simbólicas (symlinks). Este booleano inclui elas, permitindo assim o uso das ligações simbólicas dentro de pastas tais como a pasta "pages", por exemplo.

• Tipo: Boolean

export default {
  build: {
    followSymlinks: true
  }
}