使用 vue.esm-bundler.js 时如何在生产模式下加载 vue？

Question

我使用 Vue 3 和 webpack，并使用 vue.esm-bundler.js 加载它，因为我有 in-dom 模板。

文档说，使用捆绑器，“让 prod/dev 分支带有 process.env.NODE_ENV 防护（必须由捆绑器替换）”

这是什么意思？我应该如何通过 webpack 来实现这一点？我目前刚刚设置了别名，例如：

config.resolve =  {
  alias: {
    esmvue$: path.resolve(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js')
  }
}

但是我还是不明白如何激活生产模式。我不完全理解上面的文档句子的含义。

Answer 1

我刚刚意识到 webpack（至少 v5）会在开发和生产模式下自动将 process.env.NODE_ENV 注入到捆绑文件中。 因此，默认情况下，process.env.NODE_ENV 将在 vue.esm-bundler.js 中可用，无需执行任何操作。

我还了解到，可能在这个功能之前，实现它的方法是使用内置的 webpack DefinePlugin：

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
});

这对于在捆绑文件中设置其他变量或常量仍然有用。例如一些 Vue 配置：

new webpack.DefinePlugin({
  __VUE_OPTIONS_API__: 'true',
  __VUE_PROD_DEVTOOLS__: 'false',
  __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
})