Vue 3.4.4升级后，__VUE_PROD_HYDRATION_MISMATCH_DETAILS__特性标志配置位置咨询

这个警告是因为Vue 3.4+的esm-bundler构建版本要求显式定义生产环境特性标志，以此优化tree-shaking效果。针对你的vue.config.js配置文件，有两种可行的配置方式：

方式一：直接配置configureWebpack #

通过webpack的DefinePlugin全局注入特性标志，修改后的完整配置如下：

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        // 生产环境建议设为false，关闭调试信息以优化性能
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false)
      })
    ]
  }
})

方式二：使用chainWebpack链式配置 #

如果你习惯用链式修改webpack配置，可以这样写：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      // 同样，生产环境推荐设为false
      args[0]['__VUE_PROD_HYDRATION_MISMATCH_DETAILS__'] = JSON.stringify(false)
      return args
    })
  }
})

注意事项 #

• 如果需要在生产环境保留 hydration 不匹配的详细调试信息，可以把代码里的false改成true，但会增加打包体积，建议仅在排查问题时启用。
• 配置完成后重启开发服务器或重新打包生产环境，警告就会消失。

内容的提问来源于stack exchange，提问作者Toby Fieldgroove