Vue3.2运行控制台报Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.

1、背景

今天在练手项目时，控制台报如下⚠️

main.js:6 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.
受不了，必须得解决了！！！

2、警告原因

官网给出解释，说是HYDRATION_MISMATCH是在生产环境中使用的，建议仅在调试时启用。
咱这目前只是搞个练手，生产个P，所以关了它就可！

3、解决方法

先说下，我是使用vue/cli脚手架创建的vue3.0版本，所以需要更改vue.config.js中的内容

官网给出的解决方案是：

官方解决方案 包括针对不同构建工具（Vite、vue-cli、webpack、Rollup）的解决方案

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

但是我的vue.config.js中的样式是这样儿色的。

导出对象格式不一样啊！！！ defineConfig是什么鬼？？？

于是又去官网了解了下，脚手架配置文件有两种样式，默认的是直接对象暴露出去，使用defineConfig的是可以有更友好的类型提示。

vue/cli官网建议

// 第一次导出样式
vue.config.js
module.exports = {
// 选项…
}
vue.config.js
// 第二种导出样式
const { defineConfig } = require(‘@vue/cli-service’)
module.exports = defineConfig({
// 选项…
})

所以通过更换导出样式，并添加对MISMATCH_DETAILS_警告的false设置，完美解决！！

PS：宝子记得要npm run dev下！