如何设置全局功能标志？

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__

和

__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;
}

Answer 2

对于经历过它并且遇到问题的不是 Parcel 而是 Webpack 的每个人......

您可以使用 DefinePlugin webpack 来定义这 2 个全局值，如下所示：

plugins: [
    new DefinePlugin({
        __VUE_OPTIONS_API__: true,
        __VUE_PROD_DEVTOOLS__: true
    }),
],

或者如果您将 webpack 与 Webpack Encore symfony 一起使用，请这样做：

.addPlugin(new webpack.DefinePlugin({
    __VUE_OPTIONS_API__: true,
    __VUE_PROD_DEVTOOLS__: true
}))

• 需要单独安装 webpack 包，将其导入到 webpack.config.js 文件中并调用

  webpack.DefinePlugin