如何设置全局功能标志？

Question

使用 Vue.js v3 和 Parcel.js v2 开始一个新项目。设置和启动一个简单的Hello World应用程序一切顺利，除了浏览器控制台中的此警告：

功能标志 __VUE_OPTIONS_API__、__VUE_PROD_DEVTOOLS__ 未明确定义。您正在运行 Vue 的 esm-bundler 版本，它希望通过捆绑器配置全局注入这些编译时功能标志，以便在生产包中获得更好的树摇动。
有关更多详细信息，请参阅http://link.vuejs.org/feature-flags。

此外，Vue Devtools 在控制台中被禁用。

链接中仅说明了如何在 Webpack、rollup 和 Vite 上设置这些标志。

Answer 1

看起来这些警告是在没有名为__VUE_OPTIONS_API__and 的全局变量时生成的__VUE_PROD_DEVTOOLS__（请参阅代码）。

在 webpack 设置中，您可以使用Define Plugin在构建时注入全局变量。不幸的是，我还不知道有任何parcel2插件可以做到这一点（尽管编写起来非常简单）。但是，您可以通过在应用程序入口.js文件的开头附近编写以下内容来自己创建它们：

globalThis.__VUE_OPTIONS_API__ = true;
globalThis.__VUE_PROD_DEVTOOLS__ = false;

如果您希望在开发或生产中具有不同的值，您可以利用 Parcel 的节点模拟功能，如下所示：

if (process.env.NODE_ENV === "development") {
   globalThis.__VUE_OPTIONS_API__ = true
   globalThis.__VUE_PROD_DEVTOOLS__ = true;
} else {
   // different values for production.
   globalThis.__VUE_OPTIONS_API__ = false;
   globalThis.__VUE_PROD_DEVTOOLS__ = false;
}