Vue-cli 3 环境变量全部未定义

Question

我已经尝试了所有的解决方案，但 none 似乎对我有用。我只想将一些值存储在我的 Vue 应用程序中的 .env 文件中，但只是想从组件中记录 process.env returns 一个空对象。

我的.env文件

VUE_APP_URL={api url}
VUE_APP_TOKEN={token}

我的计划是将这些环境变量设置为数据属性，但它总是 returns undefined。如果我从 webpack.config.js 执行 console.log(process.env.NODE_ENV) ，它将显示我正在开发中，但如果我尝试从组件内部执行相同操作，例如

mounted() {
    this.$nextTick(() => {
      console.log(process.env.VUE_APP_URL);
    })
  }

只是 returns undefined.

Answer 1

如果你的vue-cli版本高于3.x并且你把你的 .env 文件放在根目录中，就像评论中说的那样。比你可以从组件访问你的环境变量（像这样 process.env.VUE_APP_YOUR_VARIABLE）。正如 vue-cli docs

中所说

Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. You can access them in your application code: console.log(process.env.VUE_APP_SECRET)

Answer 2

我明白了 - 我必须安装 dotenv-webpack 并在 webpack.config.js 中初始化它，这很奇怪，因为 none 的文档指出我需要这样做。

Answer 3

所以我用 VUE_APP_API_URL（这不起作用）然后我把它改成 VUE_APP_APIURL（这个有效）

希望对您有所帮助

Answer 4

给登陆这里的人的一些提示：

确保您的 .env 文件 在项目根文件夹 中（而不是说 src/）
如果要静态嵌入到客户端包中，变量名应以开头VUE_APP_
重新启动 开发服务器或构建您的项目以使更改生效
如果您从基于 webpack 的解决方案迁移，请确保将 :（来自 JSON 配置）替换为 =（dotenv 格式).容易错过
确保您已保存对 .env 文件的所有更改。
在旧的 Vue 版本中，环境变量定义在例如config/dev.env.js 而不是根

.env

Answer 5

这对我有用。我之前通过在 VS Code 中的 Exploer 中右键单击并添加一个新文件，在根文件夹中手动创建了 .env.development 和 .env.production 文件。这一直给我未定义。

我删除了文件并首先安装了 npm install touch-cli -g 安装后，我添加了 touch .env.production 和 touch .env.production 这样的环境文件，并且可以正常工作。所以我认为这些 env 文件的生成方式有所不同。

注意：我没有安装 webpack。仅使用 vue cli 构建

VS Code ExplorerChrome Developer Tools

Answer 6

我将我的 .env 文件放在根目录中，并在每个变量后附加 VUE_APP_。

为了演示这一点，例如，如果您要使用的变量是 API_BASE_URL

在您的 .env 文件中，您将变量设置为 VUE_APP_API_BASE_URL=baseurl/api/v1

要在您的文件中访问它，您需要执行 process.env.VUE_APP_API_BASE_URL。

警告：

永远不要在您的前端放置任何您不想让任何人看到的敏感信息。您不想让任何人看到的最常见的东西（关于网络开发）是您的 API 密钥。这样做会产生真正的后果。 This 就是这样一个例子，有人将 API 键暴露给 public。

但是，即使您将敏感数据放入 .env 文件并将 .env 文件添加到 .gitignore 文件（因此不会将其推送到 Git 存储库托管服务，例如 Github、BitBucket、Gitlab 等），您的数据在前端仍然不安全。只有在后端代码上完成此操作才是安全的，因为它将托管在服务器上。

在前端，只要有心的人都能找到你的敏感信息。您的所有信息都可以在浏览器上找到，该人需要做的就是打开 dev tools 并检查 Sources 选项卡，然后 BOOM 您的所有敏感信息都会暴露出来。

前端的环境变量仅在您需要非敏感信息的一个参考点时才有用，例如 BASE URL，如上例所示。 BASE URL 可以在开发过程中更改，您不想手动更改应用程序文件夹中的所有引用。这很乏味，而且您可能会错过一些，这会导致错误。

如果您想避免在前端暴露您的 API 密钥和其他可能需要的敏感信息，请查看此 article。

Answer 7

安装 dotenv-webpack 并配置 vue.config.js 文件如下。

npm install dotenv-webpack --save-dev

将此添加到您的配置文件中：

const Dotenv = require('dotenv-webpack');


module.exports = {
  configureWebpack: {
    plugins: [
      new Dotenv()
    ]
  }
}

在您的 .env 文件中，确保在您的变量之前添加 VUE_APP_，如下所示：

VUE_APP_VAR1=example
VUE_APP_VAR2=value

现在您可以在 Vue 应用程序中访问这些变量：

console.log(process.env.VUE_APP_VAR1); // "example"
console.log(process.env.VUE_APP_VAR2); // "value"

这里有一些链接供参考：

Answer 8

Vue CLI dotenv 用法无法提供 .env 变量，但前缀为 VUE_APP_。这没问题，但这远远不足以满足任何想要方便、安全地管理其（有时是巨大的）不同环境变量列表的严肃的 Web 项目。

这是使用 .env 变量的解决方案，就像在后端使用 dotenv 一样方便。

使用此解决方案，您可以像这样 const key = process.env.MY_EXTERNAL_API_KEY.

从代码中的 .env[.environment] 文件访问 MY_EXTERNAL_API_KEY

它提供：

使用无前缀 VUE_APP_ 变量名和使用 .env 变量 expansion feature 的便利性（使用 ${VARNAME} 种变量）
必要的安全性：您的变量在运行时间在 console.log(pocess.env.MYVAR) 的浏览器控制台中不可用，也无法通过构建应用程序的 JS 包中的文本搜索进行探索。
你还可以继续使用original Vue CLI solution；

为此，请在您的 vue.config.js 中使用 dotenv-webpack 插件，如下所示：

const Dotenv = require('dotenv-webpack');

const envPath = function() {
    return (!process.env.NODE_ENV || (process.env.NODE_ENV === 'development')) ?
        './.env' :
        `./.env.${process.env.NODE_ENV}`;
}

const dotenvArgs = {
    expand: true,
    path: envPath()
};

module.exports = {
   //... some other config here
    configureWebpack: {
        plugins: [
            new Dotenv(dotenvArgs)
        ]
    }
};

这里：

expand: true 允许 ${MYVAR} 变量扩展；
path: envPath() 允许定义自定义 .env 文件名 depending on your Vue CLI project environments，路径取决于您的项目结构；

还有其他有用的 dotenv-webpack options 您可以使用。

我相信这个解决方案足以完全满足最常见的用例。

注意：请记住，当您将通过 .env 设置的秘密变量传递给来自前端的 HTTP 请求时（例如，调用某些外部 API 时的 API 键）任何知道在哪里看的人都可以看到它们。为了减少这种情况的安全风险，有不同的解决方案。

只是提示您必须：

仅通过您的应用程序提供公开开放的数据；
或通过某些身份验证服务（login/password + JWT|会话、外部身份验证提供商，例如 Facebook、Google 等）对您的应用程序（或其部分）进行身份验证；
或求助于服务器生成的应用程序。

但这是整个单独的主题。

Answer 9

它也可能有帮助：确保您的 .env 文件是小写字母，因为在 Linux 中它不会工作，即使它在 windows

中工作

Answer 10

提供的答案 here 帮助了我。我正在使用 Laravel 和 Vue 2.x 的奇怪设置。该项目还使用 Laravel Mix。解决方法如下：

在您的 .env 文件中，它是 package.json 的同级文件：

MY_ENVIRONMENT_VARIABLE=my_value

webpack.mix.js 内部：

const { mix } = require('laravel-mix');

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.EnvironmentPlugin (
                ['MY_ENVIRONMENT_VARIABLE']
            )
        ]
    };
});

之后，npm run dev 或 npx mix 应该允许您使用这些变量。

来源：Thorsten Lünborg

Answer 11

如果你来自 VUE-cli-2 或者你只是 cloned/installed 一个旧的 vuejs 项目并且你找不到 .env 文件，这个 article 解释了你有什么设置你的 .env 变量，因为它们的环境文件可能位于 config/dev.env.js 中（注意：这是 Vue-cli-2 文件特有的）

这里还有解决方案和详细的explanation Vue-cli-3 .env 相关问题

Answer 12

对我有用的是从 .env 变为 .env.local。还没有调查为什么，但我检查了一个旧项目，发现我有一个 .env.local 而不是并对该项目做了同样的事情，该项目不会从 .env 中选择值，无论 vars 是否以 [= 为前缀14=] 成功了。

Vue-cli 3 环境变量全部未定义

Vue-cli 3 Environment Variables all undefined

environment-variables

vue.js

vuejs2

vue-cli

vue-cli-3

警告：