Parcel 2 + Vue 3 - 如何设置全局功能标志？ Vue Devtools 禁用

Question

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

Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are 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 http://link.vuejs.org/feature-flags.

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

在link中只说明了如何在webpack、rollup和Vite上设置这些标志。在网上搜索在 Parcel 中配置它们，但一无所获。

请帮忙，我真的需要 Vue Devtools 才能工作。

Answer 1

看起来这些警告是在没有名为 __VUE_OPTIONS_API__ 和 __VUE_PROD_DEVTOOLS__ 的全局变量时生成的（参见 code）。

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

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

如果您希望在开发或生产中有不同的价值，您可以利用 Parcel 的 node emulation feature，像这样：

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

Parcel 2 + Vue 3 - 如何设置全局功能标志？ Vue Devtools 禁用

Parcel 2 + Vue 3 - How to set global feature flags ? Vue Devtools disabled

devtools

parceljs

vuejs3