Flag警告

Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.

参考文档:

https://vuejs.org/api/compile-time-flags.html#vue-prod-hydration-mismatch-details

警告信息

runtime-core.esm-bundler.js?21f2:5233 
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.

官方文档说该Flag是在3.4版本添加的，我使用的vue是3.2.13在浏览器控制台也报这个警告。

@vue/cli版本: 5.0.8

vue3_error_falg_warning_1.webp

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

modele.export = {
  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'
    })
  ]
}