场景引入
使用 `@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'
})
]
}