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)
- 官方文档:https://github.com/vuejs/core/tree/main/packages/vue#bundler-build-feature-flags
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。