包2+ Vue 3-如何设置全局特征标志？Vue Devtools残疾

Question

使用Vue.js v3和Parcel.js v2启动一个新项目。除了浏览器控制台中的警告之外，安装和启动一个简陋的Hello应用程序一切都很顺利：

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在控制台中被禁用。

在链接中，只说明如何在webpack、rollup和Vite上设置这些旗帜。在网上搜索包裹中的配置，却一无所获。

请帮帮忙，我真的需要退伍军人服去工作。

Answer 1

这些警告似乎是在没有名为__VUE_OPTIONS_API__和__VUE_PROD_DEVTOOLS__的全局变量时生成的(参见代码)。

在webpack设置中，可以在构建时使用定义插件注入全局变量。不幸的是，我还没有意识到有任何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

对于每一个经历它的人来说，不是为了包裹，而是为了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