库 dotenv-webpack 不适用于 vue 3 和 webpack-cli

Question

我正在使用 Vue 3 和 Webpack 5 并想安装 dotenv-webpack，但我无法让它工作。
这是完整的代码：https://github.com/golebiewska-n/webpack5-vue3

设置：
我用来启动应用程序的 package.json 脚本

webpack-cli serve

webpack.config.js

const Dotenv = require('dotenv-webpack')
...
module.exports = (env) => {
  return {
    ...
    plugins: [
       ...
       new Dotenv()
    ]
  }
}

.env（添加到我的应用程序的根文件夹中）

VUE_APP_VAR=123

主程序

console.log(process.env)

控制台中的输出是："MISSING_ENV_VAR"

我尝试从 webpack 配置的插件中删除 new webpack.DefinePlugin({...})，但没有帮助。

Answer 1

事实上，您已成功加载带有dotenv-webpack 的.env 文件，并且可以访问VUE_APP_VAR。只是您不能使用整个 process.env 对象，因为 dotenv-webpack 不允许它向您显示 MISSING_ENV_VAR。

如果您将 srcLayout.vue 中的第 12 行更改如下：

- return process.env
+ return process.env.VUE_APP_VAR

您在 Vue 应用程序中获得变量的 123 值。

原因是在使用 webpack dotenv-webpack 构建应用程序时，将代码中存在的显式字符串 process.env.SOME_EXPLICIT_VARIABLE_NAME_HERE 替换为 SOME_EXPLICIT_VARIABLE_NAME_HERE 的实际值（如果它存在于 Webpack JS 环境的实际 process.env 对象中）。

这意味着您永远无法在 webpack 包中访问整个 process.env 对象，并且该包不包含像 VUE_APP_VAR=123 这样的变量名。这是dotenv-webpack的目标。

您可以在我的回答here 中获得更多详细信息。

PS：DefinePlugin，在构建配置中返回，可以覆盖process.env。它在 Vue CLI 中这样做（这几乎是不合理的）。因此，它的效果应该被手动中和，以便 dotenv-webpack 可以在 Vue CLI（v4 和 v5）应用程序中按预期工作。