Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.

由于defineModel在vue3.4版本才能使用，原有项目依赖为 "vue": "^3.3.4", "@vitejs/plugin-vue": "^4.1.0", 升级项目中vue版本后出现如下警告：

　　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_MISMATCH_DETAILS__ 未被明确定义。您正在运行Vue的esm-bundler构建版本，这个版本期望在编译时通过bundler配置全局注入这些特性标志，以便在生产捆绑包中获得更好的tree-shaking效果。

__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ 概述？
　　在Vue 3.4版本中引入了特性标志__VUE_PROD_HYDRATION_MISMATCH_DETAILS__，是一个编译时的特征标志（feature flag），它用于控制在生产环境下服务器端渲染（SSR）过程中hydration（激活）阶段的错误处理行为。
　　在Vue应用进行SSR时，服务器会预先生成HTML字符串发送到客户端，然后客户端的JavaScript执行时会对这个静态HTML进行 hydration，即把静态HTML转换成可响应数据变化的动态DOM。
　　在这个过程中，如果服务器生成的初始HTML结构与客户端Vue组件渲染出的结构不匹配，就会发生hydration不匹配错误。
　　默认情况下，在生产环境中，Vue通常会简化这类错误报告以提高性能和减少包体积。然而，启用 __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ 标志后，即使在生产环境下，当发生hydration不匹配错误时，Vue也会输出详细的错误信息，这对于调试和排查此类问题非常有用。

如何消除此警告？

方式一：手动明确定义
    vite
        import { defineConfig } from "vite";
        export default defineConfig({
          define: {
            __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "true",
          },
        });
    
    webpack
        // webpack.config.js
        const webpack = require('webpack');

        module.exports = {
          // ...
          plugins: [
            new webpack.DefinePlugin({
              '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': JSON.stringify(true),
            }),
          ],
        };

方式二：升级@vitejs/plugin-vue 
    "vue": "^3.4.21",
    "@vitejs/plugin-vue": "^5.0.4"