首页 前端知识 Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined

Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined

2024-04-21 10:04:31 前端知识 前端哥 152 283 我要收藏

场景引入

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5556.html
标签
评论
发布的文章

CSS(8)空间转换 动画

2024-04-29 12:04:29

CSS介绍(4)--背景属性

2024-04-29 12:04:26

Web学习记录---CSS(1)

2024-04-29 12:04:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!