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.jsvite.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: {
      ...
    },
  }
})

报错原因


水冗水孚
1.1k 声望584 粉丝

每一个不曾起舞的日子,都是对生命的辜负