Флаги, используемые во время компиляции ​

При использовании Vue с шагом сборки, можно настроить ряд флагов времени компиляции для включения / отключения определенных функций. Преимущество использования флагов компиляции заключается в том, что отключенные таким образом функции можно удалить из конечного пакета с помощью tree-shaking.

Vue будет работать, даже если эти флаги не будут явно настроены. Однако рекомендуется всегда настраивать их так, чтобы соответствующие функции были правильно удалены при необходимости.

Как настроить их в зависимости от инструмента сборки, смотрите в разделе Руководства по настройке.

__VUE_OPTIONS_API__ ​

• По умолчанию: true

  Включить / отключить поддержку Options API. Отключение этой функции приведет к уменьшению размера пакетов, но может повлиять на совместимость со сторонними библиотеками, если они полагаются на Options API.

__VUE_PROD_DEVTOOLS__ ​

• По умолчанию: false

  Включите / отключите поддержку devtools в продакшн сборках. Это приведет к увеличению количества кода в пакете, поэтому рекомендуется включать эту функцию только для отладки.

__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ ​

• По умолчанию: false

  Включить / выключить подробные предупреждения о несоответствии гидрации в продакшн сборках. Это приведет к увеличению количества кода, включаемого в пакет, поэтому рекомендуется включать эту функцию только для целей отладки.

• Доступно только в версиях 3.4+

Руководства по настройке ​

Vite ​

@vitejs/plugin-vue автоматически предоставляет значения по умолчанию для этих флагов. Для того чтобы изменить значения по умолчанию, используйте опцию Vite define config:

import { defineConfig } from 'vite'  export default defineConfig({  define: {  // включить подробности несоответствия гидрации в продакшн сборке  __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'  } })

vue-cli ​

@vue/cli-service автоматически предоставляет значения по умолчанию для некоторых из этих флагов. Чтобы настроить / изменить значения:

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 ​

Флаги должны быть определены с помощью функции webpack DefinePlugin:

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

Rollup ​

Флаги должны быть определены с помощью @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'  })  ] }