Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly define...

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.

上述是console报错信息

版本："vue": "^3.4.21", "vite": "5.0.4",

报错截图

解决方案

vite.config.js或vite.config.ts 文件配置define，如下：

// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV } = env
  return {
    base: VITE_APP_ENV === 'production' ? '/' : '/',
    plugins: createVitePlugins(env, command === 'build'),
    define: {
         '__VUE_PROD_DEVTOOLS__': false,
         '__VUE_OPTIONS_API__': true,
         '__VUE_PROD_HYDRATION__': true,
         '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': false
    },
    resolve: {
      ...
    },
    // vite 相关配置
    server: {
      ...
    },
  }
})

报错原因

• 项目构建时明确定义特定的特性标志（feature flags）
• 官方文档：github.com/vuejs/core/…