Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined

问题描述：

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

main.js:11 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'
    })
  ]
}