Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined

场景引入

使用 `@vue/cli 5.0.8`（目前最新版本）创建的脚手架项目运行之后，会在控制台打印下面的警告信息：

main.ts:7 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.
initFeatureFlags    @    runtime-core.esm-bundler.js:4804
baseCreateRenderer    @    runtime-core.esm-bundler.js:4818
createRenderer    @    runtime-core.esm-bundler.js:4811
ensureRenderer    @    runtime-dom.esm-bundler.js:1672
createApp    @    runtime-dom.esm-bundler.js:1686
eval    @    main.ts:7
./src/main.ts    @    app.js:63
__webpack_require__    @    app.js:215
(anonymous)    @    app.js:1331
__webpack_require__.O    @    app.js:257
(anonymous)    @    app.js:1332
(anonymous)    @    app.js:1334

解决方法

vue 官网参考链接：https://cn.vuejs.org/api/compile-time-flags.html#VUE_PROD_HYDRATATION_MISMATCH_DETAILS

webpack 构建项目

官网参考链接：https://cn.vuejs.org/api/compile-time-flags.html#webpack

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
+ const { DefinePlugin } = require('webpack')

module.exports = defineConfig({
  transpileDependencies: true,
+ configureWebpack: {
+   plugins: [
+     new DefinePlugin({
+       __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
+     })
+   ]
+ }
})

Rollup 构建项目

官网参考链接：https://cn.vuejs.org/api/compile-time-flags.html#rollup

Vite 同理可得，参考 Vite 配置：build.rollupOptions

// rollup.config.js
import replace from '@rollup/plugin-replace'

export default {
  plugins: [
    replace({
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
    })
  ]
}