Vue3使用CLI搭建后，出现runtime-core.esm-bundler.js:4264 Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS

背景

今天在用Vue-CLI脚手架搭建vue项目时，使用的vue3版本，项目启动后浏览器控制台提示一个属性未明确声明：

runtime-core.esm-bundler.js:4264  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 .....

排查解决

1.我用的是Edge浏览器，试了下Chrome也是一样提示此问题，首先排除浏览器的原因

2.查询Vue官网，按报错关键字‘__VUE_PROD_HYDRATION_MISMATCH_DETAILS__’查找，确实找到了，这个配置项是打包编译相关的标识，可以通过配置为false/true来控制是否移除相关的代码，减轻包体积

3.在没显示指定的情况下，默认是false，不影响运行，但不显示声明则会出现提示，vue.config文件显式的配置出来即可：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  lintOnSave:false, // 语法提示
  chainWebpack: (config) => { // 关闭runtime-core.esm-bundler.js:4264   Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.提示
    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
    })
  },
})

其它构建工具搭建时如何关闭此提示

Vite​

使用 Vite 的 define 配置项

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

export default defineConfig({
  define: {
    // 启用生产环境构建下激活不匹配的详细警告
    __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 的 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'
    })
  ]
}