功能标志 __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ 未明确定义。我在哪里定义它？

Question

由于刚刚将 vue.js 升级到版本 3.4.4，我现在在浏览器控制台中收到以下警告：

功能标志VUE_PROD_HYDRATION_MISMATCH_DETAILS未明确定义。您正在运行 Vue 的 esm-bundler 版本，它希望通过捆绑器配置全局注入这些编译时功能标志，以便在生产包中获得更好的树摇动。

所以我读到这是他们推出的一些新旗帜。

编辑：

我在项目中使用 vue.config.js 文件。这是应该添加标志的地方吗？目前看起来是这样的：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

我的问题： “我在哪里设置这个标志”？我找到了很多关于我应该定义这个标志的信息，但没有关于“在哪里”我应该定义它的信息......

Answer 1

如果您将不再维护的 @vue/cli-service 与 webpack 一起使用，这是因为该工具没有定义此功能标志的默认值。它对其他两个捆绑器功能标志执行此操作，当我创建一个 PR 来添加此默认值时（因为我自己刚刚点击了这个 - https://github.com/vuejs/vue-cli/pull/7443），我确实这样做了预计它不会被合并并发布，因为最新版本是 2022 年 7 月发布的。

因此，您应该使用 Define 插件在 webpack 配置中自行定义它。

由于他们的问题是更新以指示 的使用vue.config.js，您可以这样设置：

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        // Vue CLI is in maintenance mode, and probably won't merge my PR to fix this in their tooling
        // https://github.com/vuejs/vue-cli/pull/7443
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
      })
    ],
  },
});

有关配置选项的详细信息，请参阅https://cli.vuejs.org/config/#configurewebpack 。