admin管理员组文章数量:1650772
场景引入
使用 `@vue/cli 5.0.8`(目前最新版本)创建的脚手架项目运行之后,会在控制台打印下面的警告信息:
main.ts:7 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.
For more details, see https://link.vuejs/feature-flags.
initFeatureFlags @ runtime-core.esm-bundler.js:4804
baseCreateRenderer @ runtime-core.esm-bundler.js:4818
createRenderer @ runtime-core.esm-bundler.js:4811
ensureRenderer @ runtime-dom.esm-bundler.js:1672
createApp @ runtime-dom.esm-bundler.js:1686
eval @ main.ts:7
./src/main.ts @ app.js:63
__webpack_require__ @ app.js:215
(anonymous) @ app.js:1331
__webpack_require__.O @ app.js:257
(anonymous) @ app.js:1332
(anonymous) @ app.js:1334
解决方法
vue 官网参考链接:https://cn.vuejs/api/compile-time-flags.html#VUE_PROD_HYDRATATION_MISMATCH_DETAILS
webpack 构建项目
官网参考链接:https://cn.vuejs/api/compile-time-flags.html#webpack
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
+ const { DefinePlugin } = require('webpack')
module.exports = defineConfig({
transpileDependencies: true,
+ configureWebpack: {
+ plugins: [
+ new DefinePlugin({
+ __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
+ })
+ ]
+ }
})
Rollup 构建项目
官网参考链接:https://cn.vuejs/api/compile-time-flags.html#rollup
Vite 同理可得,参考 Vite 配置:build.rollupOptions
// rollup.config.js
import replace from '@rollup/plugin-replace'
export default {
plugins: [
replace({
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
})
]
}
本文标签: Flagfeaturedefinedexplicitly
版权声明:本文标题:Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729531594a1204876.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论