Vue3.4+报Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined... 处理

admin管理员组

文章数量:1650769

Vue3.4.5 尝鲜时报如下警告，强迫症表示受不了。

警告信息：​​​​​​

Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

For more details, see https://link.vuejs/feature-flags.

Improved Hydration Mismatch Errors​

Context: PR#5953

3.4 ships a number of improvements to hydration mismatch error messages:

1. Improved clarity of the wording (rendered by server vs. expected on client).
2. The message now includes the DOM node in question so you can quickly locate it on the page or in the elements panel.
3. Hydration mismatch checks now also apply to class, style, and other dynamically bound attributes.

In addition, 3.4 also adds a new compile-time flag, __VUE_PROD_HYDRATION_MISMATCH_DETAILS__, which can be used to force hydration mismatch errors to include full details even in production.

各种环境处理方法：

Vite

// 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.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.config.js
module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: 'true',
      __VUE_PROD_DEVTOOLS__: 'false',
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
    })
  ]
}

Rollup

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

本文标签： Flagfeaturedefinedexplicitly