背景
今天在用Vue-CLI脚手架搭建vue项目时,使用的vue3版本,项目启动后浏览器控制台提示一个属性未明确声明:
runtime-core.esm-bundler.js:4264 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 .....
排查解决
1.我用的是Edge浏览器,试了下Chrome也是一样提示此问题,首先排除浏览器的原因
2.查询Vue官网,按报错关键字‘__VUE_PROD_HYDRATION_MISMATCH_DETAILS__’查找,确实找到了,这个配置项是打包编译相关的标识,可以通过配置为false/true来控制是否移除相关的代码,减轻包体积
3.在没显示指定的情况下,默认是false,不影响运行,但不显示声明则会出现提示,vue.config文件显式的配置出来即可:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
lintOnSave:false, // 语法提示
chainWebpack: (config) => { // 关闭runtime-core.esm-bundler.js:4264 Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.提示
config.plugin('define').tap((definitions) => {
Object.assign(definitions[0], {
__VUE_OPTIONS_API__: 'true',
__VUE_PROD_DEVTOOLS__: 'false',
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
})
return definitions
})
},
})
其它构建工具搭建时如何关闭此提示
Vite
使用 Vite 的 define 配置项
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
define: {
// 启用生产环境构建下激活不匹配的详细警告
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
}
})
vue-cli
自动为其中一些标志提供默认值。要配置/修改这些值:
// vue.config.js
module.exports = {
chainWebpack: (config) => {
config.plugin('define').tap((definitions) => {
Object.assign(definitions[0], {
__VUE_OPTIONS_API__: 'true',
__VUE_PROD_DEVTOOLS__: 'false',
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
})
return definitions
})
}
}
webpack
应该使用 webpack 的 DefinePlugin 定义这些标志:
// webpack.config.js
module.exports = {
// ...
plugins: [
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: 'true',
__VUE_PROD_DEVTOOLS__: 'false',
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
})
]
}
Rollup
应该使用 @rollup/plugin-replace 定义这些标志:
// rollup.config.js
import replace from '@rollup/plugin-replace'
export default {
plugins: [
replace({
__VUE_OPTIONS_API__: 'true',
__VUE_PROD_DEVTOOLS__: 'false',
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
})
]
}