Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are running the

前端（从入门到入土）

于 2024-04-17 10:13:57 发布

阅读量4.3k

点赞数 19

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45600228/article/details/137861168

版权

本文介绍了在使用vue-cli构建Vue3项目时遇到关于__VUE_PROD_HYDRATION_MISMATCH_DETAILS__的警告，解决方法是通过在vue.config.js中添加适当定义，确保编译时功能标志在全球范围内注入，以实现更好的生产环境树抖动。

摘要由CSDN通过智能技术生成

使用vue-cli构建vue3项目时，一直有警告： 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.

未明确定义功能标志__VUE_PROD_HYDRATION_ISMATCH_DETAILS__。您正在运行Vue的esm-bundler构建，它希望通过bundler配置全局注入这些编译时功能标志，以便在生产捆绑包中更好地进行树抖动。

解决方法：

vue.config.js添加以下代码

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

成功解决