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

Question

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

我的.env 文件

VUE_APP_URL={api url}
VUE_APP_TOKEN={token}

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

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

它只返回undefined。

Answer 1

给来到这里的人的一些提示：

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

Answer 2

我想通了 - 我必须安装 dotenv-webpack 并在 webpack.config.js 中对其进行初始化，这很奇怪，因为没有文档说明我需要这样做。

Answer 3

所以我用 VUE_APP_API_URL（这不起作用） 然后我将其更改为 VUE_APP_APIURL（可行）

希望对你有帮助

Answer 4

安装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"

这里有一些链接供参考：

• https://www.npmjs.com/package/dotenv-webpack
• https://cli.vuejs.org/guide/webpack.html
• https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

Answer 5

如果您的 vue-cli version 高于 3.x 并且您将 .env 文件放在根目录中，如 cmets 中所述.你可以从组件中访问你的环境变量（比如process.env.VUE_APP_YOUR_VARIABLE）。 如vue-cli docs 中所说

只有以VUE_APP_ 开头的变量才会以webpack.DefinePlugin 静态嵌入到客户端包中。您可以访问 它们在您的应用程序代码中：console.log(process.env.VUE_APP_SECRET)

Answer 6

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

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

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

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

警告：

切勿在前端放置任何您不想让任何人看到的敏感信息。您不希望任何人看到的最常见的东西（关于 Web 开发）是您的 API 密钥。这样做会产生真正的后果。 This 就是一个这样的例子，就是有人将 API 密钥暴露给公众而被烧毁。

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

在前端，任何有足够决心的人都可以找到您的敏感信息。您的所有信息都可以在浏览器上查看，该人只需打开dev tools 并检查Sources 选项卡，BOOM 您的所有敏感信息都会暴露无遗。

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

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

Answer 7

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

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

使用此解决方案，您可以从您的代码中的.env[.environment] 文件中访问您的MY_EXTERNAL_API_KEY，如下所示const key = process.env.MY_EXTERNAL_API_KEY。

它提供：

1. 方便使用非前缀VUE_APP_变量名和使用.env变量expansion feature（使用${VARNAME}类变量）
2. 必要的安全性：您的变量既不能在运行时使用 console.log(pocess.env.MYVAR) 在浏览器控制台上使用，也不能通过已构建应用程序的 JS 包中的文本搜索进行探索。
3. 您仍然可以使用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。

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

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

只是提示您必须：

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

但这是整个单独的主题。

Answer 8

这对我有用。我之前通过右键单击 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 9

这也可能有帮助：确保您的 .env 文件是小写字母，因为在 Linux 中即使在 Windows 中运行它也无法运行

Answer 10

here 提供的答案帮助了我。我正在为 Vue 2.x 使用带有奇怪设置的 Laravel。该项目也使用 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 或者你刚刚克隆/安装了一个旧的 vuejs 项目并且你找不到.env 文件，这个article 解释了你必须做什么来设置你的.env变量，因为它们的环境文件可能位于 config/dev.env.js （注意：这是 Vue-cli-2 文件特有的）

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