Opções de Compilação ​

Quando usamos a Vue com uma etapa de construção, é possível configurar um número de opções de compilação para ativar ou desativar certas funcionalidades. O benefício de usar as opções de compilação é que as funcionalidades desativadas desta maneira podem ser removidas do pacote final através da agitação da árvore.

A Vue funcionará mesmo se estas opções não forem explicitamente configuradas. No entanto, é recomendado sempre configurá-las para que as funcionalidades relevantes podem ser removidas corretamente quando possível.

Consultar os Guias de Configuração sobre como configurá-las dependendo da nossa ferramenta de construção.

__VUE_OPTIONS_API__ ​

• Predefinida como: true

  Ativa ou desativa o suporte da API de Opções. Desativar isto resultará em pacotes menores, mas pode afetar a compatibilidade com as bibliotecas de terceiros se estas dependerem da API de Opções.

__VUE_PROD_DEVTOOLS__ ​

• Predefinida como: false

  Ativa ou desativa o suporta das ferramentas de programação nas construções de produção. Isto resultará em mais código incluído no pacote, então é recomendado ativar isto apenas para fins de depuração.

__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ ​

• Predefinida como: false

  Ativa ou desativa avisos detalhados para as disparidades de hidratação nas construções de produção. Isto resultará em mais código incluído no pacote, então é recomendado ativar isto apenas para fins de depuração.

Guias de Configuração ​

Vite ​

A @vitejs/plugin-vue fornece automaticamente valores padrão para estas opções. Para mudar os valores padrão, usamos a opção de configuração define da Vite:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    // ativar detalhes de disparidade de hidratação na
    // construção de produção
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
  }
})

vue-cli ​

A @vue/cli-service fornece automaticamente os valores padrão para algumas destas opções. Para configurar ou mudar os valores:

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false',
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      })
      return definitions
    })
  }
}

webpack ​

As opções devem ser definidas usando a DefinePlugin da Webpack:

// webpack.config.js
module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: 'true',
      __VUE_PROD_DEVTOOLS__: 'false',
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
    })
  ]
}

Rollup ​

As opções devem ser definidas usando @rollup/plugin-replace:

// rollup.config.js
import replace from '@rollup/plugin-replace'

export default {
  plugins: [
    replace({
      __VUE_OPTIONS_API__: 'true',
      __VUE_PROD_DEVTOOLS__: 'false',
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
    })
  ]
}