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

原创已于 2024-06-20 11:41:28 修改 · 1.9w 阅读

115 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-01-04 21:55:50 首次发布

Vue3.4.5引入了改进的Hydration Mismatch错误，导致出现警告。该警告指出应通过编译器配置全局注入`__VUE_PROD_HYDRATION_MISMATCH_DETAILS__`标志，以在生产环境中获得更好的树摇优化。3.4版本还提高了错误消息的清晰度，并提供了定位DOM节点的方法。文章详细介绍了在Vite、Vue-cli、WebPack和Rollup等不同构建工具下的解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.org/feature-flags.

Improved Hydration Mismatch Errors

Context: PR#5953

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

Improved clarity of the wording (rendered by server vs. expected on client).
The message now includes the DOM node in question so you can quickly locate it on the page or in the elements panel.
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'
    })
  ]
}