Compile-Time flags ​

Při použití Vue s build fází je možné konfigurovat několik příznaků (compile-time flags) umožňujících povolit / zakázat určité funkce. Výhodou jejich použití je, že funkce zakázané tímto způsobem lze odstranit z finálního balíčku pomocí tree-shakingu.

Vue bude fungovat i tehdy, pokud tyto příznaky nejsou explicitně nakonfigurovány. Nicméně se doporučuje nakonfigurovat je vždy, aby bylo možné příslušné funkce správně odstranit, pokud to jde.

Podívejte se na Průvodce konfigurací, jak je nastavit v závislosti na vašem build nástroji.

__VUE_OPTIONS_API__ ​

• Výchozí hodnota: true

  Povolit / zakázat podporu Options API. Zakázání tohoto nastavení povede ke snížení velikosti balíčku, ale může ovlivnit kompatibilitu s knihovnami třetích stran, pokud se na Options API spoléhají.

__VUE_PROD_DEVTOOLS__ ​

• Výchozí hodnota: false

  Povolit / zakázat podporu nástrojů pro vývoj (DevTools) v produkčních buildech. Povolení povede k zahrnutí více kódu do distribučního balíčku, proto se doporučuje tuto možnost povolit pouze pro účely ladění.

__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ ​

• Výchozí hodnota: false

  Povolit / zakázat podrobná varování o nesouladech hydratace (hydration mismatch) v produkčních buildech. Povolení povede k zahrnutí více kódu do distribučního balíčku, proto se doporučuje tuto možnost povolit pouze pro účely ladění.

• Podporováno až od verze 3.4+

Průvodce konfigurací ​

Vite ​

@vitejs/plugin-vue pro tyto příznaky automaticky poskytuje výchozí hodnoty. Pro změnu výchozích hodnot použijte Vite konfigurační možnost define (dokumentace):

import { defineConfig } from 'vite'  export default defineConfig({  define: {  // povolit podrobnosti o nesouladu hydratace v produkčním buildu  __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'  } })

vue-cli ​

@vue/cli-service automaticky poskytuje výchozí hodnoty pro některé z těchto příznaků. Pro konfiguraci / změnu hodnot:

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 ​

Příznaky by měly být definovány pomocí webpack DefinePlugin:

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

Rollup ​

Příznaky by měly být definovány pomocí @rollup/plugin-replace:

import replace from '@rollup/plugin-replace'  export default {  plugins: [  replace({  __VUE_OPTIONS_API__: 'true',  __VUE_PROD_DEVTOOLS__: 'false',  __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'  })  ] }