Kompilyatsiya Vaqti Bayroqlari ​

Vue'ni build qadamida ishlatganda, ma'lum xususiyatlarni yoqish/o'chirish uchun bir qator kompilyatsiya vaqti bayroqlarini sozlash mumkin. Kompilyatsiya vaqti bayroqlaridan foydalanishning afzalligi shundaki, shu tarzda o'chirilgan xususiyatlar yakuniy bundle'dan tree-shaking orqali olib tashlanishi mumkin.

Vue bu bayroqlar aniq sozlanmasa ham ishlaydi. Biroq, tegishli xususiyatlarni iloji boricha to'g'ri olib tashlash uchun ularni har doim sozlash tavsiya etiladi.

Ularni build vositangizga qarab qanday sozlash haqida Configuration Guidesni tekshiring.

__VUE_OPTIONS_API__ ​

• Default: true

  Options API qo'llab-quvvatlashni yoqish/o'chirish. Buni o'chirish kichikroq bundle'larga olib keladi, lekin uchinchi tomon kutubxonalari Options API'ga tayanadigan bo'lsa, moslikni ta'sir qilishi mumkin.

__VUE_PROD_DEVTOOLS__ ​

• Default: false

  Production build'larida devtools qo'llab-quvvatlashni yoqish/o'chirish. Bu bundle'ga ko'proq kod kiritilishiga olib keladi, shuning uchun uni faqat debug maqsadlarida yoqish tavsiya etiladi.

__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ ​

• Default: false

  Production build'larida hydration nomuvofiqliklari uchun batafsil ogohlantirishlarni yoqish/o'chirish. Bu bundle'ga ko'proq kod kiritilishiga olib keladi, shuning uchun uni faqat debug maqsadlarida yoqish tavsiya etiladi.

• Faqat 3.4+ versiyasida mavjud

Sozlash Yo'riqnomalari ​

Vite ​

@vitejs/plugin-vue bu bayroqlar uchun default qiymatlarni avtomatik ravishda ta'minlaydi. Default qiymatlarni o'zgartirish uchun Vite'ning define config opsiyasidan foydalaning:

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

export default defineConfig({
  define: {
    // production build'da hydration nomuvofiqliklari tafsilotlarini yoqish
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
  }
})

vue-cli ​

@vue/cli-service bu bayroqlarning ba'zilari uchun default qiymatlarni avtomatik ravishda ta'minlaydi. Qiymatlarni sozlash/o'zgartirish uchun:

// 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 ​

Bayroqlar webpack'ning DefinePluginidan foydalanib aniqlanishi kerak:

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

Rollup ​

Bayroqlar @rollup/plugin-replacedan foydalanib aniqlanishi kerak:

// 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'
    })
  ]
}