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

Question

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

我的.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

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

只有这样开始的变量VUE_APP_将静态嵌入到与客户端捆绑webpack.DefinePlugin 。 您可以在您的应用程序代码中访问它们： console.log(process.env.VUE_APP_SECRET)

Answer 5

安装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 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 密钥。 这样做会产生真正的后果。 这是一个被烧毁的人向公众公开 API 密钥的例子。

但是，即使你把你的敏感数据在.env文件和添加.env文件到.gitignore文件（因此不是推到一个Git仓库托管服务如Github上，到位桶，Gitlab等），您的数据仍然在前端不安全。 只有在后端代码上完成此操作时才安全，因为它将托管在服务器上。

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

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

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

Answer 7

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

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

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

VS Code Explorer Chrome 开发者工具

Answer 8

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

下面是利用的解决方案.env变量一样便利与后端dotenv 。

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

它提供：

1. 使用无前缀的VUE_APP_变量名称和使用.env变量扩展功能的.env （使用${VARNAME}类变量）
2. 必要的安全性：您的变量既不能在运行时通过console.log(pocess.env.MYVAR)在浏览器控制台中使用，也不能通过构建应用程序的 JS 包中的文本搜索进行探索。
3. 您仍然可以使用原始的 Vue CLI 解决方案；

为此，请在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()允许根据您的 Vue CLI 项目环境定义自定义.env文件名，路径取决于您的项目结构；

您可以使用其他有用的dotenv-webpack选项。

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

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

只是为了暗示您必须：

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

但这是整个独立的主题。

Answer 9

我知道这个问题是关于vue-cli 3 的，它为 Vue 2 生成代码。但是如果你用谷歌搜索“vue3 不嵌入 env”和类似的查询，它是最重要的结果，所以我认为很多人结束了当在他们的 Vue 3 应用程序中遇到process.env变量未定义的问题时，请到这里。

所以这是关于如何解决 Vue 3 env 问题的答案。

这就是造成混乱的原因

1. 如果你用谷歌搜索 vue 的环境问题，你最终会在vue-cli文档中找到。 但是vue-cli在 Vue 3 中被create-vue取代了。页面顶部有一个警告框告诉您这一点，但您可能已经错过了。

2. 如果您没有错过它并点击框中的两个链接之一，您最终会进入 Vue 3 工具指南或create-vue库。 这些资源都没有提到环境变量。 但是你了解到create-vue是基于 Vite 的。

3. 如果你跟着那个领导和谷歌搜索“vite env”，你最终会在vite文档中找到答案：

   • env 变量必须以VITE_为前缀才能编译到应用程序中（与vue 2中的VUE_APP_相反）
   • 环境变量将在您的应用程序的import.meta.env中可用（与vue 2中的process.env相反）

后一个是我花了最长的时间才弄明白的。

这就是你需要做的

在项目根目录的.env文件中：

VITE_MY_ENV_VAR=foo

该文档还将告诉您 Vite 中 .env 文件的不同命名模式。 如果您在不同的环境中工作，则非常有用的信息！

在你的应用程序中：

const my_env_var = import.meta.env.VITE_MY_ENV_VAR

我希望这可以节省某人解决这个问题的时间。

Answer 10

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

Answer 11

此处提供的答案帮助了我。 我正在使用 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 12

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

这里也是Vue-cli-3 .env相关问题的解决方案和详细解释

Answer 13

对我有用的是从.env更改为.env.local 。 还没有调查为什么，但我检查了一个旧项目，发现我有一个.env.local并且对这个项目做了同样的事情，它不会从.env中选择值，无论 vars 是否以VUE_APP为前缀并且它工作。

Answer 14

在子 Vue 组件中似乎无法访问环境变量。 最好使用main.js Vue.prototype.env = process.env;在 main.js 中全局声明它们

Answer 15

如果您使用 VITE，请使用 VITE_ 而不是 VUE_APP