編譯時標誌

提示

編譯時標誌僅在使用 Vue 的 esm-bundler 構建版本時適用（即 vue/dist/vue.esm-bundler.js）。

在使用 Vue 進行構建時，可以配置一系列編譯時標誌以啟用或停用某些功能。使用編譯時標誌的優點是，透過這種方式停用的功能可以透過搖樹最佳化從最終包中刪除。

即使沒有明確配置這些標誌，Vue 仍然可以工作。然而，建議始終配置它們，以便在可能的情況下正確刪除相關功能。

有關如何根據您的構建工具配置它們，請參閱配置指南。

`__VUE_OPTIONS_API__`

預設值： true
啟用/停用選項 API 支援。停用此選項將導致包體積更小，但可能會影響與依賴選項 API 的第三方庫的相容性。

`__VUE_PROD_DEVTOOLS__`

預設值： false
啟用/停用生產構建中的 devtools 支援。這將導致包中包含更多程式碼，因此建議僅用於除錯目的。

`__VUE_PROD_HYDRATION_MISMATCH_DETAILS__`

預設值： false
啟用/停用生產構建中水合不匹配的詳細警告。這將導致捆綁包中包含更多程式碼，因此建議僅用於除錯目的。
僅在3.4+版本中可用

配置指南

Vite

@vitejs/plugin-vue 自動為這些標誌提供預設值。要更改預設值，請使用 Vite 的 define 配置選項

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

export default defineConfig({
  define: {
    // enable hydration mismatch details in production build
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
  }
})

vue-cli

@vue/cli-service 自動為這些標誌提供一些預設值。要配置/更改值

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

標誌應使用 webpack 的 DefinePlugin 定義

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

Rollup

標誌應使用 @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'
    })
  ]
}

在 GitHub 上編輯此頁面

編譯時標誌 ​

__VUE_OPTIONS_API__ ​

__VUE_PROD_DEVTOOLS__ ​

__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ ​

配置指南 ​

Vite ​

vue-cli ​

webpack ​

Rollup ​